How i can change text in HTML with Javascript [duplicate] - javascript

This question already has answers here:
Find and replace specific text characters across a document with JS
(14 answers)
Closed 11 months ago.
<a href="/knowledgebase/category/community?language=tr" class="Category-Item">
<h4><span><i class="fas fa-comments"></i></span> Community</h4>
<p></p>
<span class="MoreArticles">8 Makaleler</span>
</a>
I want find and replace text under a class.
For example; Finding "Community" text and change to "Topluluk".
I writed a javascript language and i need do this for non-multilangual application.
Before:
<a href="blabla" class="**Category-Item**"><i class="blabla">Community</i>
After:
<a href="blabla" class="**Category-Item**"><i class="blabla">Topluluk</i>

from what i understood , you can select the element then change the inner text. if that's not what you ment please leave a comment.
let text = document.querySelector('h4');
text.innerText = "changed";

Related

Select text between 2 complete span tags using regex [duplicate]

This question already has answers here:
Parse an HTML string with JS
(15 answers)
Closed 3 years ago.
Take the following:
<span class='exclass'>1.</span> Lorem Ipsum <span class="exclass2" title="This is an example">*</span>
I am trying to create a regex expression that will select:
<span class='exclass'>1.</span>
AND
<span class="exclass2" title="This is an example">*</span>
Regex expressions like ^(<span(.*)<\/span>)$ select all of the text.
What expression will select the two complete tags and ignore the loose text between them? (Lorem Ipsum)
Regex is not good way to find HTML tags. But this should work for you-
<\s*span[^>]*>(.*?)<\s*\/\s*span>
DEMO: https://regex101.com/r/vbLN9L/6

.html only returning internal content [duplicate]

This question already has answers here:
Get selected element's outer HTML
(30 answers)
Closed 4 years ago.
I do not have much experience with jQuery and I think this is very minor issue. I am trying to get html of an element including its self. But it is returning only internal content of selected element.
For example I have implemented this on litag but I am able to get its internal content only with this. How I can get complete html
For example this is my html
<li class="selected_li"> <span> some text </span> </li>
and this is jQuery
jQuery(".selected_li").html();
So it is returning only span and its text but I want to get complete html which is
<li class="selected_li"> <span> some text </span> </li>
How I can get this. Is there a different jQuery function to get this?
You can get it using outerHTML
console.log($(".selected_li")[0].outerHTML)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="selected_li"> <span> some text </span> </li>
</ul>

Change the text in a button using javascript? [duplicate]

This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 6 years ago.
I have a FAQ list that works that way : there are several mini cards that contain a question (some text) and a button (let's say "see the answer"). When I click on the button, the answer to the question appears above the button. Then the button should not be a "see the answer" button, but a "close" one. I need a little help with that last part.
Here is what I have done :
<p>Question</p>
<div class="collapse" id="FAQ">
<div class="well">
Answer to the question
</div>
</div>
<a class="btn" role="button" data-toggle="collapse" href="FAQ" aria-expanded="false" aria-controls="collapseExample">See the answer</a>
Side question : since this is a list and I'm going to have several "See the answer/Close" buttons, I would say I'm not allowed to use an id to make it work, am I ?
You can dynamically set the text on the button by $(".btn").innerHTML = "new text to be displayed". Put this in your first click(function() {...}) function.
And no, never use the same id for multiple elements. Use classes instead. You can have multiple classes on one element. So for example you may have class="btn close" and then use toggleClass("close") to add it when it's not there, remove it when it is.

How to use RegExp to match all characters between HTML tags? [duplicate]

This question already has answers here:
What to do Regular expression pattern doesn't match anywhere in string?
(8 answers)
Closed 8 years ago.
I want to use JavaScript to match ALL content between <div class="class-test"> and </div>. What RegExp should I use?
The complicated part is, there might be some more HTML tags inside it. For example:
<div class="class-test">
<div> this is a sub div </div>
<p>this is a p</p>
</div>
BTW, The HTML is not real HTML but just pure text. So it's not possible to 'parse' it. I am actually using Node.JS to modify a HTML file.
Thanks.
You can do this easily with a module like cheerio:
var cheerio = require('cheerio');
var $ = cheerio.load('<div class="class-test"><div> this is a sub div </div><p>this is a p</p></div>');
var content = $('div.class-test').html();
console.log(content);

Regex to change text between tags [duplicate]

This question already has answers here:
How to use JavaScript regex over multiple lines?
(8 answers)
Closed 8 years ago.
I have text that I want to remove and replace. I've have two tags which it lies between:
<!--start--></span>
</p>
<p id="nameIs" style="font-size: 12pt;">Dear Mr Johnstone,</p>
<p style="font-size: 12pt;">400 Isle Road</p>
<p style="font-size: 12pt;">Here Road</p>
<p style="font-size: 12pt;">KP33 7OL</p>
<p><span style="font-size: 12pt;"><!--end-->
I wan to to replace the text but I can't make the regex work. It seems not to find the text:
var textholder2 = textholder.replace(/<!--start-->.*<!--end-->/, idToUseIs)
idToUseIs is the replacement text.
thanks
textholder.replace(/<!--start-->(.|\n|\r)+<!--end-->/g, idToUseIs)
You dont need regex for fixed string.
Just use substring and simple maths.
var tok1 = "<!--start-->"
var tok2 = "<!--end-->"
textholder2 = textholder2.substring(0, s.indexOf(tok1)) +
textholder2.substring(textholder2.indexOf(tok2)+tok2.length

Categories

Resources