We Keep Coding

select text inside a paragraph tag [duplicate]

This question already has answers here:
How can I use the event #select to select some text from a paragraph in Vue.js?
(2 answers)
Closed 2 years ago.
Is it possible to select text or get the position of highlighted text inside a paragraph <p> ?
I am showing a text sentence by sentence using a loop of paragraph in vuejs.
<p
class="mreadonly text-left mark-context"
v-for="line in jsonData.first.segments"
v-bind:key="line.idx"
#mouseup="mouseupSel($event)"
>{{line.text}}</p>
The mouseup is what I think is the only possible event I can use, since onselect (#select on vue) doesn't work with paragraph.
What could I do to get an onselect-like event, taking into account that I need the selected text mainly to split the original complete string in two parts?
Should I convert my paragraph into input tags? Is it possible to make them look like paragraphs?

Thanks to Leeish, here is what I've done. It's a slightly duplicate question apparently, but the answer here might help anyway.
The HTML stay the same, with #mouseup.
On methods I wrote (as quick and dirty example):
mouseup(ev){
console.log('onselect',ev);
var gs = window.getSelection();
var data = gs.baseNode.data;
var data2 = data.substr(gs.anchorOffset+gs.toString().length,data.length);
var data1 = data.substr(0,gs.anchorOffset) + gs.toString();
console.log(data1);
console.log(data2);
},

How to make and edit an Html div in javascript [duplicate]

This question already has answers here:
Dynamically creating HTML elements using Javascript?
(6 answers)
Closed 2 years ago.
Trying to make an Html div inside a div that is already made using javascript but my function has a problem.
Html part
<div id="test">
<button onclick="addDiv()">test</button>
</div>
Js part
let page = document.querySelector('test');
function addDiv() {
document.createElement('div')
document.querySelector('page')
addedDiv = document.appendChild('div')
page = document.appendChild('div')
document.getElementById('div').innerHTML = "ThisFunctionIsWorking"
}
the output should be seen in the console with a text inside the div that says ThisFunctionIsWorking
but instead I get an error(Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.)
I would appreciate your time helping me...

Your code is incorrect in many ways. I suggest you study basic (web) programming with the emphasis on fundamentals like return values, scope, etc. and then basic javascript and dom tree manipulation.
A solution to your problem is:
<div id="test">
<button onclick="addDiv('test')">test</button>
</div>
function addDiv(nodeId) {
var elem = document.createElement('div')
var container = document.getElementById(nodeId)
container.appendChild(elem)
elem.innerHTML = "ThisFunctionIsWorking"
}

How to create div with text using jQuery? [duplicate]

This question already has answers here:
How to put HTML in jQuery .text()
(6 answers)
Closed 5 years ago.
I am trying to grab text inside a page, and put it inside a div/span element using jQuery.
For example, grab <p>Did you know "LARC" is a Medical Term?</p> off a webpage and put it inside of a div like so: <p>Did you know <div class="LARC IS COOL">"LARC"</div> is a Medical Term?</p>
The reason I am asking is because I need to run a function on a specific word with a class but I don't have access to the html where that word is due to the fact it comes from an outside source and is loaded on the page.
This is what I currently have:
jQuery('.gfield_label').each(function() {
var text = jQuery(this).text();
jQuery(this).text(text.replace("LARC", "<div class='LARC IS COOL'>LARC</div>"));
});
But it just outputs this on the webpage:
Did you know <div title='THIS BETTER WORK'>LARC</div> is a medical term?

You will want to use the HTML function when replacing.
see: http://api.jquery.com/text/ and
http://api.jquery.com/html/
jQuery('.gfield_label').each(function() {
var text = jQuery(this).text();
jQuery(this).html(text.replace("LARC", "<div class='LARC IS COOL'>LARC</div>"));
});

Instead of using .text(), try using .html().

Using Jquery or Javascript to find unlabled html [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Remove elements with only a space using jQuery
I have an automatically generated HTML feed that is filled with garbage... I am trying to clean it up a bit and would like to use jquery to strip out some of the bad code. So for example on an average page buried in the code there are close to 200x:
<div align="center"> </div>
If there was some sort of id or class element, these would be easy to get rid of. But I can't think of a way to find them without anything actually in them. Can I search by attribute? Or better yet is there a way to find by HTML code...

If you are trying to simply remove all empty DIV elements, or DIV's with only a single space, then you could do this:
$('div').map(function() {
if( $(this).html().length <= 0 || $(this).html() == " ")
{
return this;
}
}).remove();
This iterates through all of the div's on your page and if they match a certain criteria (they are empty or only have a whitespace) then it removes them from the DOM.
This should give you a starting point. If you wanted to only check the DIV's with an align property of "center" then you would do this:
$('div:[align="center"]').map(function() {
if( $(this).html().length <= 0 || $(this).html() == " ")
{
return this;
}
}).remove();
jQuery's map() function can be great when a simple filter, or attribute comparison will not suffice.
You can read more about it here.... http://api.jquery.com/map/

There is a jQuery attribute selector
For your example:
jQuery( "div [align='center']" )

How to extract content of html tags from a string using javascript or jquery? [duplicate]

This question already has answers here:
Creating a new DOM element from an HTML string using built-in DOM methods or Prototype
(29 answers)
Closed 8 years ago.
Maybe this is very basic, but I am all confused.
I have a simple html page with many sections (div). I have a string containing html tags in javascript. The code is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>";
</script>
</head>
<body>
<div id="title1"></div>
<div id="new1"></div>
<div id="title2"></div>
<div id="new2"></div>
</body>
</html>
I want to extract content of the html tags (from the string in javascript) and display that content in my html page in desired sections.
i.e. I want "This is a heading1" displayed in <div id="title1"> and "This is a paragraph1." to be displayed in <div id="new1"> and same for the second pair of tags.
I need all of this to work only on the client side. I have tried to use HTML DOM getElementByTagName method and its getting too complicated. I know very little of jquery. And I am confused. I dont understand how to go about it. Can you guide me what to use - javascript or jquery and how to use it? Is there a way to identify the from the string and iterate through it?
How to extract "This is heading1" (and similar contents enclosed in the html tags) from str1?? I don't know the index of these hence cannot use substr() or substring() function in javascript.

Using .text() as both a 'getter' and a 'setter' we can just repeat the pattern of:
target the element on the page we wish to fill
give it content from
the string
jsFiddle
<script type="text/javascript">
var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>";
$(function(){
var $str1 = $(str1);//this turns your string into real html
//target something, fill it with something from the string
$('#title1').text( $str1.find('h2').eq(0).text() );
$('#new1').text( $str1.find('p').eq(1).text() );
$('#title2').text( $str1.find('h2').eq(1).text() );
$('#new2').text( $str1.find('p').eq(1).text() );
})
</script>

IMHO , You can do this in jquery in two steps :
Step 1) Parse the string into an XML/HTML document.
There are at least two ways to do this:
a) As mentioned by Sinetheta
var htmlString = "<html><div></div></html>";
var $htmlDoc = $( htmlString );
b) Using parseXML
var htmlString = "<html><div></div></html>";
var htmlDoc = $.parseXML( htmlString );
var $htmlDoc = $( htmlDoc );
Please refer http://api.jquery.com/jQuery.parseXML/
Step 2) Select text from the XML/HTML document.
var text = $htmlDoc.text( jquery_selector );
Please refer http://api.jquery.com/text/

Well,
First of all you should clarify how you are getting the source html from your own html. If you are using Ajax you should tick the source as html, even xml.

document.getElementById('{ID of element}').innerHTML
if use jquery
$('selector').html();
<div id="test">hilo</div>
<script>
alert($('#test').html());
<script>

Let me preface my answer with the knowledge that I don't think I fully understand what you want to do...however I think you want to replace some (although you make it sound like all) html with some data source.
I've rigged a simple example is jsfiddle here:
http://jsfiddle.net/rS2Wt/9/
This does a simple replace using jquery on a target div.
Hope this helps, good luck.