Looking for a script that will check the page for any text that has double quotes e.g. Hello world, "this is a great example". So grabbing "this is a great example" and wrapping it in an <em> tag
So the result will be <em>"this is a great example"</em>
Is this possible?
That's pretty easy to achieve with jQuery:
$('body :not(script, style)').contents().filter(function() {
// find text nodes in <body> ignoring <script> and <style> tags
return this.nodeType === 3;
}).replaceWith(function() {
// find quoted text and wrap it with <em> tags
return this.nodeValue.replace(/"[^"]+"/g, '<em>$&</em>');
});
span {
color: #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
Hello world! "This is a great example"<br>
<span>Hello world! "This is a great example"</span>
</p>
You can look for the regex in the whole page using javascript like this:
var matchingText = document.documentElement.innerHTML.match(/"(.*?)"/);
The result will be an array with Strings in double quotes.
Than you can iterate through them and add <em> tag to each one of them.
Related
At work, I am developing an Angular component that displays a string from its input on the rendered HTML page.
The HTML for displaying the string looks something like this:
<span>{{value}}</span>
where value comes from this.value in the Angular code. For normal strings this works OK, but I have found that Angular strips out leading whitespace. Now I know that HTML itself compresses multiple whitespace into one when rendering the HTML into a visible page, but the whitespace is removed from the HTML itself.
I have verified that the string in the Angular code contains whitespace:
console.log("The string is: [" + this.value + "]");
prints out The string is: [ Hello world!] on the web console. But what appears on the rendered HTML page is:
<span>Hello world!</span>
How can I fix this?
Even if Angular preserves the whitespace, which I assume it is doing, html will strip it down. You have two option to either use tag or do it via css as shown below:
No Preservation <br/>
<span> Hello world! </span><br/>
<span> Hello world! </span>
<br/>
With Pre tag
<pre>
<span> Hello World! </span>
</pre>
<br/>
With Css white-space: pre<br/>
<span style="white-space: pre;">
Hello World! </span>
One of the options is to use a non-breaking whitespace like this const value = ' Hello World!'
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 am having trouble with some code for a chrome extension. The code is supposed to replace a word with another one. It does this, however, I would only like it to replace a word if it is within certain tags such as <p></p> or header tags. At the moment it replaces all the words in the HTML file within the <body></body>. This sometimes interferes with the HTML code and can break certain features of a website. Here's what I have currently.
document.body.innerHTML = document.body.innerHTML.replace(newRegExp("old", "g"), "new");
Thank you for the help!
So just loop over all the elements that you care about and do the replacement on those elements only.
// Get all the elements that you care about into an array
let elements = Array.prototype.slice.call(document.querySelectorAll("p, header"));
// Loop over the items in the array
elements.forEach(function(el){
// Do the replace on the element
el.textContent = el.textContent.replace(/text/g, "letters");
});
<header>This is some text in a header</header>
<h1>This is some text in an h1</h1>
<div>This is some text in a div</div>
<p>This is some text in a p</p>
<div>This is some text in a div</div>
<div>This is some text in a div
<p>This text is inside of a p with lots of text</p>
</div>
I don't have access to external libraries of any kind so I have to use pure javascript.
The input I'm getting is along the lines of:
"<html>
<body>
<p>Test</p>
</body>
</html>"
The goal would be to highlight the word test.
I've thought about splitting the string by linebreak then doing an includes search on the resulting array to find my keyword, but then I wouldn't be sure about how to add a class/element to the tag.
Any ideas?
This will highlight the first p element but if you have more than one it would be better to use an ID and find it by getElementById
p = document.getElementsByTagName('p');
p[0].style.background= 'yellow'
"<html>
<body>
<p style="width:30px;">Test</p>
</body>
</html>"
Can someone tell me how to preserve the url in this replace? when i run this code it finds and replaces the text but removes the link text and just has the word text. I need to preserve the link and this is just a simple example. The actually code I need to work with a a dynamic link so I can just manually replace it.
$(".text_div").text(function () {
return $(this).text().replace("contains", "hello everyone");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text_div">
This div contains some text.
</div>
this give's me
This div hello everyone text.
Use .html() instead of .text():
$(".text_div").html(function() {
return $(this).html().replace("contains", "hello everyone");
})
$(".text_div").html(function() {
return $(this).html().replace("contains", "hello everyone");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text_div">
This div contains some text.
</div>
Instead of using $(this).text(), you should be doing $(this).html().