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}`)
Related
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>"
I want to use javascript to find and replace a word which has been split in a few tags.
For example, the html code:
<html>
<body>
<div id="page-container">
This is an apple.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>
</div>
</body>
</html>
And the it looks like below in the web browser:
This is an apple.
apple.
I use this javascript to find and replace the word "apple":
var a = document.getElementById('page-container').innerHTML;
a=a.replace(/apple/g,'pear');
document.getElementById('page-container').innerText=a;
But the result in the web browser is very bad, and all the tags could not work:
This is an pear.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>
It seems the replace function worked for the first row but cannot recognize the word split in the tags. This is an example, the whole content could be much more complex with more tags like , , not only ... Is there a way to replace only text but keep the original html tag format?
var a = document.getElementById('page-container').textContent;
a = a.replace(/apple/g, 'pear');
var a=a.split('.');
document.getElementById('page-container').innerHTML = `${a[0]}.<br/><span> ${a[1]}
<span>`;
That is because you have nested elements, so when you set innerHTML of the parent div, it treats inner div as text and print it out , try to replace this :
document.getElementById('page-container').innerText=a;
with this :
document.getElementById("page-container").firstChild.innerHTML = a;
So, you target only your first child which is parent div.
Live example:
https://jsbin.com/hujurageya/edit?html,js,output
I want to keep only all these tags <strong></strong> , <em></em>, <p></p> , <strike></strike> etc right now i am using JavaScript regex like this.
var s = "<div><p>p tag</p> <strike>Strike</strike> <strong>strong</strong> in <u>underline</u> <em>italic</em> <span>this is span tag</span> <img src=''><br> final words</div>";
console.log(s.replace(/\<(?!strong|br|em|p|u|strike).*?\>/g, ""));
It is working 50% fine because it is not removing my defined html tags, but problem is it is removing all end tags here is how i am getting the output
Output :
<p>p tag <strike>Strike <strong>strong in <u>underline <em>italic this is span tag <br> final words
but i need the output something like this
Required Output:
<p>p tag</p> <strike>Strike</strike> <strong>strong</strong> in <u>underline</u> <em>italic</em> this is span tag <br> final words
Is there any javascript expert there who could help me with this i really appreciate your help.
Thanks
Match closing tags with an optional / right after the < and use positive lookahead for a word character (to ensure / doesn't get matched):
var s = "<div><p>p tag</p> <strike>Strike</strike> <strong>strong</strong> in <u>underline</u> <em>italic</em> <span>this is span tag</span> <img src=''><br> final words</div>";
console.log(s.replace(/<\/?(?=\w)(?!strong|br|em|p|u|strike).*?>/g, ""));
// ^^^^^^^^^
But regular expressions generally shouldn't be used in an attempt to parse anything but the most trivial HTML
I have the following Problem:
<h1 id="title">Text Text Text <br> Second Text Text Text </h1>
How can i change or manipulate the Text after the break-Tag ?
I cant change the HTML itself and it has to be done via JavaScript containing jQuery.
After manipulating it should look like this:
<h1 id="title">Text Text Text <br> <span id="preTitle"> blablabla </span></h1>
Anybody got a solution to this? Thanks in advance
Take the initial html inside h1 tag. Split it by br tag. Adjust the second part of splited html with span tag. Join splited parts with br tag and put them back into h1 tag:
var html = $("#title").html();
var parts = html.split("<br>");
parts[1] = "<span class='preTitle'>"+parts[1]+"</span>";
$("#title").html(parts.join("<br>"));
.preTitle{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 id="title">Text Text Text <br> Second Text Text Text </h1>
You can use JQuery:
var titleHtml = $("#title").html().split('<br>');
$("#title").html(titleHtml[0]+"<br><span id='preTitle'>"+titleHtml[1]+"</span>");
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/