Jquery- Selecting individual word from a text

How do I select a word using Jquery and save that into DB. ie,
Say I have the following in my page,

"<p>This is a beautiful sentence </p>"

If I click on 'beautiful', I want to show a pop up option "add". If I click on "add", the word "beautiful" will be saved in my existing database of words. If i click it again It wont be saved, the database contains unique words.

I am working in Django.

Edit:
I tried the following:

<script>
$(document).ready(function()
 $("p").click(function()
 var value = $(this).text();
 var input = $('#my_input');
 input.val(value);
 ); 
); 
</script>

edited Nov 15 '18 at 18:59

Twisty

14.4k11635

asked Nov 15 '18 at 18:47

user5513936

You'd want to wrap each part of the text that should be clickable with some type of element, like . This way you can attach a click callback to each wrapper.

– Twisty
Nov 15 '18 at 18:49

Can you explain a bit more? How do I add span ? Or any resource from where I can clearly learn this?

– user5513936
Nov 15 '18 at 18:54

They are suggesting you change your markup to This is a beautiful sentence 

– Taplar
Nov 15 '18 at 18:57

Exactly as was suggested by taplar. Your test code would call in all the text from , not just one word. There are difficult ways to identify a word by the location that was clicked, but I would advise finding a better way to tag the words.

– Twisty
Nov 15 '18 at 19:01

add a comment |

How do I select a word using Jquery and save that into DB. ie,
Say I have the following in my page,

"<p>This is a beautiful sentence </p>"

I am working in Django.

Edit:
I tried the following:

<script>
$(document).ready(function()
 $("p").click(function()
 var value = $(this).text();
 var input = $('#my_input');
 input.val(value);
 ); 
); 
</script>

edited Nov 15 '18 at 18:59

Twisty

14.4k11635

asked Nov 15 '18 at 18:47

user5513936

You'd want to wrap each part of the text that should be clickable with some type of element, like . This way you can attach a click callback to each wrapper.

– Twisty
Nov 15 '18 at 18:49

Can you explain a bit more? How do I add span ? Or any resource from where I can clearly learn this?

– user5513936
Nov 15 '18 at 18:54

They are suggesting you change your markup to This is a beautiful sentence 

– Taplar
Nov 15 '18 at 18:57

Exactly as was suggested by taplar. Your test code would call in all the text from , not just one word. There are difficult ways to identify a word by the location that was clicked, but I would advise finding a better way to tag the words.

– Twisty
Nov 15 '18 at 19:01

add a comment |

How do I select a word using Jquery and save that into DB. ie,
Say I have the following in my page,

"<p>This is a beautiful sentence </p>"

I am working in Django.

Edit:
I tried the following:

<script>
$(document).ready(function()
 $("p").click(function()
 var value = $(this).text();
 var input = $('#my_input');
 input.val(value);
 ); 
); 
</script>

edited Nov 15 '18 at 18:59

Twisty

14.4k11635

asked Nov 15 '18 at 18:47

user5513936

How do I select a word using Jquery and save that into DB. ie,
Say I have the following in my page,

"<p>This is a beautiful sentence </p>"

I am working in Django.

Edit:
I tried the following:

<script>
$(document).ready(function()
 $("p").click(function()
 var value = $(this).text();
 var input = $('#my_input');
 input.val(value);
 ); 
); 
</script>

jquery django web

edited Nov 15 '18 at 18:59

Twisty

14.4k11635

asked Nov 15 '18 at 18:47

user5513936

edited Nov 15 '18 at 18:59

Twisty

14.4k11635

asked Nov 15 '18 at 18:47

user5513936

edited Nov 15 '18 at 18:59

Twisty

14.4k11635

edited Nov 15 '18 at 18:59

Twisty

14.4k11635

edited Nov 15 '18 at 18:59

Twisty

14.4k11635

asked Nov 15 '18 at 18:47

user5513936

asked Nov 15 '18 at 18:47

user5513936

asked Nov 15 '18 at 18:47

user5513936

You'd want to wrap each part of the text that should be clickable with some type of element, like . This way you can attach a click callback to each wrapper.

– Twisty
Nov 15 '18 at 18:49

Can you explain a bit more? How do I add span ? Or any resource from where I can clearly learn this?

– user5513936
Nov 15 '18 at 18:54

They are suggesting you change your markup to This is a beautiful sentence 

– Taplar
Nov 15 '18 at 18:57

Exactly as was suggested by taplar. Your test code would call in all the text from , not just one word. There are difficult ways to identify a word by the location that was clicked, but I would advise finding a better way to tag the words.

– Twisty
Nov 15 '18 at 19:01

add a comment |

You'd want to wrap each part of the text that should be clickable with some type of element, like . This way you can attach a click callback to each wrapper.

– Twisty
Nov 15 '18 at 18:49

Can you explain a bit more? How do I add span ? Or any resource from where I can clearly learn this?

– user5513936
Nov 15 '18 at 18:54

They are suggesting you change your markup to This is a beautiful sentence 

– Taplar
Nov 15 '18 at 18:57

Exactly as was suggested by taplar. Your test code would call in all the text from , not just one word. There are difficult ways to identify a word by the location that was clicked, but I would advise finding a better way to tag the words.

– Twisty
Nov 15 '18 at 19:01

You'd want to wrap each part of the text that should be clickable with some type of element, like . This way you can attach a click callback to each wrapper.

– Twisty
Nov 15 '18 at 18:49

Can you explain a bit more? How do I add span ? Or any resource from where I can clearly learn this?

– user5513936
Nov 15 '18 at 18:54

They are suggesting you change your markup to This is a beautiful sentence 

– Taplar
Nov 15 '18 at 18:57

Exactly as was suggested by taplar. Your test code would call in all the text from , not just one word. There are difficult ways to identify a word by the location that was clicked, but I would advise finding a better way to tag the words.

– Twisty
Nov 15 '18 at 19:01

add a comment |

1 Answer
1

active

oldest

votes

Example:

$(function() 
 $("p.allow-click span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click"><span>This</span> is a <span>beautiful</span> <span>sentence</span>.</p>
<input id="my-input" type="text" />

As you can see, this allows each specific word to have a click event. You can use almost any tag, yet  is the least invasive in a sense. You could use , , or some other HTML Tag. These may change the type face or look of the text where  will not.

Update

If you do not want to manually edit the HTML, but do it all in jQuery, you could something like:

$(function() 
 function applyClick($t) 
 var inner = $t.text().trim();
 var trail = false;
 if (inner.slice(-1) == ".") 
 trail = true;
 inner = inner.slice(0, -1);
 
 var parts = inner.split(" ");
 $.each(parts, function(k, v) 
 parts[k] = "<span>" + v + "</span>";
 );
 var myInner = parts.join(" ");
 if (trail) 
 myInner = myInner + ".";
 
 $t.html(myInner);
 $t.find("span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
 
 applyClick($(".allow-click"));
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click">This is a beautiful sentence.</p>
<input id="my-input" type="text" />

Hope that helps.

edited Nov 15 '18 at 19:54

answered Nov 15 '18 at 19:05

Twisty

14.4k11635

So, do I need to add span manually? Or is there any other functions to do that?

– user5513936
Nov 15 '18 at 19:20

@SubrotoPinku You could add them manually or you can program it.

– Twisty
Nov 15 '18 at 19:24

1

@SubrotoPinku if this has answered your question, I hope you will mark it as the answer as well.

– Twisty
Nov 15 '18 at 21:07

1

@SubrotoPinku this is also included in my update above. Examine the code.

– Twisty
Nov 16 '18 at 15:44

1

@SubrotoPinku if there are multiple period symbols or other symbols, then you may want to perform a more complex search using regular expressions to find them. Since they can appear in any part of the sentence, you may want to capture the index position of each symbol and what the symbol is and then remove it from the sentence. Or don't, you can leave it in as part of the word and then filter it out before it appears in the text field. Give it a try and if needed, create a new question with what you have tried.

– Twisty
Nov 16 '18 at 16:06

|
show 6 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326073%2fjquery-selecting-individual-word-from-a-text%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Example:

$(function() 
 $("p.allow-click span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click"><span>This</span> is a <span>beautiful</span> <span>sentence</span>.</p>
<input id="my-input" type="text" />

Update

If you do not want to manually edit the HTML, but do it all in jQuery, you could something like:

$(function() 
 function applyClick($t) 
 var inner = $t.text().trim();
 var trail = false;
 if (inner.slice(-1) == ".") 
 trail = true;
 inner = inner.slice(0, -1);
 
 var parts = inner.split(" ");
 $.each(parts, function(k, v) 
 parts[k] = "<span>" + v + "</span>";
 );
 var myInner = parts.join(" ");
 if (trail) 
 myInner = myInner + ".";
 
 $t.html(myInner);
 $t.find("span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
 
 applyClick($(".allow-click"));
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click">This is a beautiful sentence.</p>
<input id="my-input" type="text" />

Hope that helps.

edited Nov 15 '18 at 19:54

answered Nov 15 '18 at 19:05

Twisty

14.4k11635

So, do I need to add span manually? Or is there any other functions to do that?

– user5513936
Nov 15 '18 at 19:20

@SubrotoPinku You could add them manually or you can program it.

– Twisty
Nov 15 '18 at 19:24

1

@SubrotoPinku if this has answered your question, I hope you will mark it as the answer as well.

– Twisty
Nov 15 '18 at 21:07

1

@SubrotoPinku this is also included in my update above. Examine the code.

– Twisty
Nov 16 '18 at 15:44

1

@SubrotoPinku if there are multiple period symbols or other symbols, then you may want to perform a more complex search using regular expressions to find them. Since they can appear in any part of the sentence, you may want to capture the index position of each symbol and what the symbol is and then remove it from the sentence. Or don't, you can leave it in as part of the word and then filter it out before it appears in the text field. Give it a try and if needed, create a new question with what you have tried.

– Twisty
Nov 16 '18 at 16:06

|
show 6 more comments

Example:

$(function() 
 $("p.allow-click span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click"><span>This</span> is a <span>beautiful</span> <span>sentence</span>.</p>
<input id="my-input" type="text" />

Update

If you do not want to manually edit the HTML, but do it all in jQuery, you could something like:

$(function() 
 function applyClick($t) 
 var inner = $t.text().trim();
 var trail = false;
 if (inner.slice(-1) == ".") 
 trail = true;
 inner = inner.slice(0, -1);
 
 var parts = inner.split(" ");
 $.each(parts, function(k, v) 
 parts[k] = "<span>" + v + "</span>";
 );
 var myInner = parts.join(" ");
 if (trail) 
 myInner = myInner + ".";
 
 $t.html(myInner);
 $t.find("span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
 
 applyClick($(".allow-click"));
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click">This is a beautiful sentence.</p>
<input id="my-input" type="text" />

Hope that helps.

edited Nov 15 '18 at 19:54

answered Nov 15 '18 at 19:05

Twisty

14.4k11635

So, do I need to add span manually? Or is there any other functions to do that?

– user5513936
Nov 15 '18 at 19:20

@SubrotoPinku You could add them manually or you can program it.

– Twisty
Nov 15 '18 at 19:24

1

@SubrotoPinku if this has answered your question, I hope you will mark it as the answer as well.

– Twisty
Nov 15 '18 at 21:07

1

@SubrotoPinku this is also included in my update above. Examine the code.

– Twisty
Nov 16 '18 at 15:44

1

@SubrotoPinku if there are multiple period symbols or other symbols, then you may want to perform a more complex search using regular expressions to find them. Since they can appear in any part of the sentence, you may want to capture the index position of each symbol and what the symbol is and then remove it from the sentence. Or don't, you can leave it in as part of the word and then filter it out before it appears in the text field. Give it a try and if needed, create a new question with what you have tried.

– Twisty
Nov 16 '18 at 16:06

|
show 6 more comments

Example:

$(function() 
 $("p.allow-click span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click"><span>This</span> is a <span>beautiful</span> <span>sentence</span>.</p>
<input id="my-input" type="text" />

Update

If you do not want to manually edit the HTML, but do it all in jQuery, you could something like:

$(function() 
 function applyClick($t) 
 var inner = $t.text().trim();
 var trail = false;
 if (inner.slice(-1) == ".") 
 trail = true;
 inner = inner.slice(0, -1);
 
 var parts = inner.split(" ");
 $.each(parts, function(k, v) 
 parts[k] = "<span>" + v + "</span>";
 );
 var myInner = parts.join(" ");
 if (trail) 
 myInner = myInner + ".";
 
 $t.html(myInner);
 $t.find("span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
 
 applyClick($(".allow-click"));
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click">This is a beautiful sentence.</p>
<input id="my-input" type="text" />

Hope that helps.

edited Nov 15 '18 at 19:54

answered Nov 15 '18 at 19:05

Twisty

14.4k11635

Example:

$(function() 
 $("p.allow-click span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click"><span>This</span> is a <span>beautiful</span> <span>sentence</span>.</p>
<input id="my-input" type="text" />

Update

If you do not want to manually edit the HTML, but do it all in jQuery, you could something like:

$(function() 
 function applyClick($t) 
 var inner = $t.text().trim();
 var trail = false;
 if (inner.slice(-1) == ".") 
 trail = true;
 inner = inner.slice(0, -1);
 
 var parts = inner.split(" ");
 $.each(parts, function(k, v) 
 parts[k] = "<span>" + v + "</span>";
 );
 var myInner = parts.join(" ");
 if (trail) 
 myInner = myInner + ".";
 
 $t.html(myInner);
 $t.find("span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
 
 applyClick($(".allow-click"));
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click">This is a beautiful sentence.</p>
<input id="my-input" type="text" />

Hope that helps.

$(function() 
 $("p.allow-click span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click"><span>This</span> is a <span>beautiful</span> <span>sentence</span>.</p>
<input id="my-input" type="text" />

$(function() 
 $("p.allow-click span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click"><span>This</span> is a <span>beautiful</span> <span>sentence</span>.</p>
<input id="my-input" type="text" />

$(function() 
 function applyClick($t) 
 var inner = $t.text().trim();
 var trail = false;
 if (inner.slice(-1) == ".") 
 trail = true;
 inner = inner.slice(0, -1);
 
 var parts = inner.split(" ");
 $.each(parts, function(k, v) 
 parts[k] = "<span>" + v + "</span>";
 );
 var myInner = parts.join(" ");
 if (trail) 
 myInner = myInner + ".";
 
 $t.html(myInner);
 $t.find("span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
 
 applyClick($(".allow-click"));
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click">This is a beautiful sentence.</p>
<input id="my-input" type="text" />

$(function() 
 function applyClick($t) 
 var inner = $t.text().trim();
 var trail = false;
 if (inner.slice(-1) == ".") 
 trail = true;
 inner = inner.slice(0, -1);
 
 var parts = inner.split(" ");
 $.each(parts, function(k, v) 
 parts[k] = "<span>" + v + "</span>";
 );
 var myInner = parts.join(" ");
 if (trail) 
 myInner = myInner + ".";
 
 $t.html(myInner);
 $t.find("span").click(function() 
 var value = $(this).text();
 var input = $('#my-input');
 input.val(value);
 );
 
 applyClick($(".allow-click"));
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click">This is a beautiful sentence.</p>
<input id="my-input" type="text" />

edited Nov 15 '18 at 19:54

answered Nov 15 '18 at 19:05

Twisty

14.4k11635

edited Nov 15 '18 at 19:54

answered Nov 15 '18 at 19:05

Twisty

14.4k11635

answered Nov 15 '18 at 19:05

Twisty

14.4k11635

answered Nov 15 '18 at 19:05

Twisty

14.4k11635

So, do I need to add span manually? Or is there any other functions to do that?

– user5513936
Nov 15 '18 at 19:20

@SubrotoPinku You could add them manually or you can program it.

– Twisty
Nov 15 '18 at 19:24

1

@SubrotoPinku if this has answered your question, I hope you will mark it as the answer as well.

– Twisty
Nov 15 '18 at 21:07

1

@SubrotoPinku this is also included in my update above. Examine the code.

– Twisty
Nov 16 '18 at 15:44

1

@SubrotoPinku if there are multiple period symbols or other symbols, then you may want to perform a more complex search using regular expressions to find them. Since they can appear in any part of the sentence, you may want to capture the index position of each symbol and what the symbol is and then remove it from the sentence. Or don't, you can leave it in as part of the word and then filter it out before it appears in the text field. Give it a try and if needed, create a new question with what you have tried.

– Twisty
Nov 16 '18 at 16:06

|
show 6 more comments

So, do I need to add span manually? Or is there any other functions to do that?

– user5513936
Nov 15 '18 at 19:20

@SubrotoPinku You could add them manually or you can program it.

– Twisty
Nov 15 '18 at 19:24

1

@SubrotoPinku if this has answered your question, I hope you will mark it as the answer as well.

– Twisty
Nov 15 '18 at 21:07

1

@SubrotoPinku this is also included in my update above. Examine the code.

– Twisty
Nov 16 '18 at 15:44

1

@SubrotoPinku if there are multiple period symbols or other symbols, then you may want to perform a more complex search using regular expressions to find them. Since they can appear in any part of the sentence, you may want to capture the index position of each symbol and what the symbol is and then remove it from the sentence. Or don't, you can leave it in as part of the word and then filter it out before it appears in the text field. Give it a try and if needed, create a new question with what you have tried.

– Twisty
Nov 16 '18 at 16:06

So, do I need to add span manually? Or is there any other functions to do that?

– user5513936
Nov 15 '18 at 19:20

@SubrotoPinku You could add them manually or you can program it.

– Twisty
Nov 15 '18 at 19:24

@SubrotoPinku if this has answered your question, I hope you will mark it as the answer as well.

– Twisty
Nov 15 '18 at 21:07

@SubrotoPinku this is also included in my update above. Examine the code.

– Twisty
Nov 16 '18 at 15:44

@SubrotoPinku if there are multiple period symbols or other symbols, then you may want to perform a more complex search using regular expressions to find them. Since they can appear in any part of the sentence, you may want to capture the index position of each symbol and what the symbol is and then remove it from the sentence. Or don't, you can leave it in as part of the word and then filter it out before it appears in the text field. Give it a try and if needed, create a new question with what you have tried.

– Twisty
Nov 16 '18 at 16:06

|
show 6 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj