I have a string which is basically an HTML String like this -
var str = "<section id='section1' class='class1'> <h3>Type 3 Heading</h3><p>Some text goes in <span> here</span> </p></section>"
I m trying to convert this HTMLString to real HTML Components using this below jQuery function and placing it in the div id sampleSection like this -
$('#sampleSection').html(str);
But it is still loading as normal string, it does take html elements into consideration but places it as normal string like this -
Type 3 Heading Some text goes in here
I want it like this -
Type 3 Heading
Some text goes in here
Note - I am trying to load this on iPad InAppWebView with local HTML and script files. Is there something I m missing or do I need to do it differently? Thanks for your help.
var str = "<section id='section1' class='class1'> <h3>Type 3 Heading</h3><p>Some text goes in <span> here</span> </p></section>"
$("#sample").html(str);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sample"></div>
The problem is in the closing tag of h3..
You have closed it as ...
var str = "<section id='section1' class='class1'> <h3>Type 3 Heading</h3><p>Some text goes in <span> here</span> </p></section>"
Related
I have simple text editor, where user can use bold/italic etc format for input. This is simply generating text in div container of id="sampleeditor", so if user want bold it`s just adding html tag , italic so the generated dom code for BOLD ENTER ITALIC will looks like:
<div class="editor" id="sampleeditor" contenteditable="true">
<b>BOLD</b>
<div><b>
<i>ITALIC</i>
</b>
</div>
</div>
The thing is that i want to fetch whole user input data which are stored in the main div and save it to json file, but when i try to get that div value:
var x = document.getElementById("sampleeditor").value;
console.log(x);
It`s just loging - undefined, so how to target whatever is inside that div?
Divs do not have value properties, you have to use inner html
var x = document.getElementById("sampleeditor").innerHTML;
console.log(x);
this is my solution
var x = document.getElementById("sampleeditor").innerText;
console.log(x);
let x = document.querySelector(".editor");
console.log(x.textContent);
<div class="editor" id="sampleeditor" contenteditable="true">
<b>BOLD</b>
<div>
<b>
<i>ITALIC</i>
</b>
</div>
</div>
I am trying to search some text which can search with or without html tag. Have tried with (?!([^<]+)?>) which is working with content which is outside of html tag.
Regex - (simple html)(?!([^<]+)?>)
Html - This is simple html text <span class='simple'>simple html</span> text simple <p>html</p>
but the content in simple <p>html</p> is not working.
Please note i am avoiding class='simple'.
Using: /<\/?.*?>/g and replace, you can strip out all HTML tags, and simply search through the remaining text.
let regex = /<\/?.*?>/g,
html = `This is simple html text <span class='simple'>simple html</span> text simple <p>html</p>`,
string = html.replace(regex, "");
console.log(`Stripped HTML: ${string}`)
let find = "simple html",
found = string.search(find);
console.log(`\n$ String "${find}" found at char ${found}`)
I've a long text (More than 10,000 words) contains html tags stored in a string.
And want to wrap every 1000 words with <div class="chunk"></div> with considering auto close opened html tags and auto open closed html tags in the different chunks.
I found many solutions but they depend on the number of characters and don't consider auto open/close html tags.
Also the php function wordwrap neglects fixing html tags problem.
Simulation
<div id="long-text">
Dynamic long text more than 10,000 words (Text contains HTML (img, p, span, i, ...etc) tags)
</div>
Wrong result
<div id="long-text">
<div class="chunk">
<p>Chunk 1 : first approximately 1000 words with their html tags
<img src="image.jpg"> ## Unclosed <p> tag ##
</div>
<div class="chunk">
## The closed <p> tag of the previous chunk ##
</p><p>Chunk 2 : second approximately 1000 words with their html tags
<img src="image.jpg"> </p><p> ## unclosed <p> tag ##
</div>
<div class="chunk">
## Missing open <p> tag because it was cut in the previous chunk ##
Chunk 3 : third approximately 1000 words with their html tags</p>
</div>
</div>
Expected result
<div id="long-text">
<div class="chunk">
<p>Chunk 1 : first approximately 1000 words with their html tags
<img src="image.jpg"> </p>
</div>
<div class="chunk">
<p>Chunk 2 : second approximately 1000 words with their html tags
<img src="image.jpg"> </p>
</div>
<div class="chunk">
<p>Chunk 3 : third approximately 1000 words with their html tags</p>
</div>
</div>
And then i can paginate the result with javascript.
After searching i found the accepted answer here: Shortening text tweet-like without cutting links inside
cutting the text (from the start only) and auto close opened html tags.
I tried to modify the code to auto open closed tags if i cut from the middle of the text but unfortunately i failed to do the job.
I don't mind if there are another better solutions to paginate the long text according to the number of words using (php or javascript or both of them).
So the idea is to use JQuery to chunk the immediate children via cloning and splitting the internal text. It may need some more work for further nested HTML but it's a start:
function chunkText(length) {
var words = $(this).text().split(" ");
var res = [$(this)];
if (words.length > br) {
var overflow = $(this).clone();
var keepText = words.slice(0,length);
$(this).text(keepText.join(" "));
overflow.text(words.slice(length).join(" "));
res = res.concat(chunkText.call(overflow, length));
}
return res;
}
var br = 10; //Words to split on
$("#long-text > *").each( function () {
var chunks = chunkText.call(this,br);
$.each(chunks, function (i,v) {
$("#long-text")
.append($("<div>").addClass("chunk").append(v))
.append($("<img>").attr("src","image.jpg")));
});
});
Basic demo:
https://jsfiddle.net/o2d8zf4v/
Hi I would like to do a Word Count in my RTE (Rich Text Editor) with javascript can also use with jquery. But it should not count the html tags and repeating white spaces.
Sample Text:
<h1>Hello World</h1> <p> This is Good!!!</p> answer <h2>thanks! </h2>
The javascript should display 7 only.
Is there any javascript code for this and that is also fast to calculate the Word Count?
Thanks!
EDIT
What if the sample text is this: <p>11 22 33</p><p>44</p>5<br></div>
The javascript should display 5 only.
First you need to get text content of element. You can get text of element using text(). Then you need to remove additional space of text. trim() and replace(/[\s]+/g, " ") remove additional space in text. Now you can convert text to word using split() method.
var length = $(".text").text().trim().replace(/[\s]+/g, " ").split(" ").length;
console.log(length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
<h1>Hello World</h1>
<p> This is Good!!!</p>
answer
<h2>thanks! </h2>
</div>
I have a div with an inner HTML which looks a lot like:
<b>First <span class="red">se</span></b><span class="red">cond third fo</span>urth fift<span class="large">h sixth</span>
This markup can contain any text formatting tags since it is the output of a text-editing library.
For something I am working on, I need to remove any nesting that exists. So, ideally, the above markup string should become:
<span style="font-weight:bold">First</span> <span style="font-weight:bold;color:red">se</span><span style="font-weight:bold">cond third fo</span><span>urth fift</span><span style="font-size:20px;">h sixth</span>
To give some context, the markup at the top is the output of Wysihtml5 text editor which is pretty useful but I need the markup to be similar to the second one to be able
Try this:
$(document).ready(function(){
$('b').each(function(){
var text = $(this).html();
$(this).replaceWith('<span style="font-weight:bold;color:red">' + text + '</span>');
});
});
Fiddle: http://jsfiddle.net/uQyL3/1/