Javascript not able to replace text with new Text with html - javascript

I trying to replace text with new text inside a html tag like:
text = " hello how are you? " ;
newText = "<h1>hello how are you? </h1> " ;
This is my code:
//replacer holds the html element
var replacer = document.getElementById("#"+id);
var newElement = "<span style='font-size:100px;' id='one4'>"+selectedinnerText+"</span>";
//selectedinnerText holds the text to be replaced
alert(selectedinnerText + " "+ newElement );
//This below line is not working properly
replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText,newElement);

Your issue is, when you are getting an element by its id in JavaScript, you do not need # infront of the id name.
var replacer = document.getElementById(id);
So, the reason why you cannot set the innerHTML of the replacer element is because there is no element stored in the variable right now.

The correct code should be
var replacer = document.getElementById(id);// no # needed here
var newElement = "<span style='font-size:100px;' id='one4'>"+selectedinnerText+"</span>";
alert(selectedinnerText + " "+ newElement );
replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText,newElement);

Related

jQuery .html() function removing text

I am trying to edit the div's text, but when i use my function to update the rowcount, everytime the text vanihes completely. Would by nice if you could also explain why.
Thanks in advance.
My update function:
var rowCountF = $('#tablef tr').length;
var rowCountV = $('#tablev tr').length;
var ftext = "Teilnehmer (" + String(rowCountF) + ")";
var vtext = "Teilnehmer (" + String(rowCountV) + ")";
$("#divf").html(ftext);
$("#divv").html(vtext);
My div layer:
<div id="divf"class="tableheader"> <h2>Teilnehmer</h2> </div>
Code for divf:
<div id="divf"class="tableheader"> <h2>Teilnehmer</h2> </div>
You are actually replacing the contents of the div itself with your text. This means the heading disappears and there is only plain text.
Probably you wanted to replace the heading contents:
$("#divf h2").html(ftext);
$("#divv h2").html(vtext);
This will select the h2 elements inside the divs and hence will update only the text inside the headings.
The result will look like the following:
<div id="divf"class="tableheader"> <h2>Teilnehmer (987)</h2> </div>
<div id="divf"class="tableheader"> <h2>Teilnehmer (123)</h2> </div>
.html() sets the HTML, meaning it replaces anything that's currently there. If you want to add to the HTML, you'll need to set the HTML to what's already there plus what you're adding, like so:
var rowCountF = $('#tablef tr').length;
var rowCountV = $('#tablev tr').length;
var ftext = "Teilnehmer (" + rowCountF + ")";
var vtext = "Teilnehmer (" + rowCountV + ")";
//Get already-existing HTML
var divfHtml = $("#divf").html();
var divvHtml = $("#divv").html();
//Set the new HTML to the existing + the new text
$("#divf").html(divfHtml + ftext);
$("#divv").html(divvHtml + vtext);
If you only want to replace the heading, then just target the <h2> as Martin Zikmund suggested in his answer.
You need to reference the h2 for the div. using .html() will replace ALL of the html inside the #divf which in this case means it will replace the h2
$("#divf h2").html(ftext);
$("#divv h2").html(vtext);
Example: https://jsfiddle.net/qhef0toc/3/

Getting HTML markup in a string compiled

I'm trying to give a HTML element a markup but it outputs in a string.
My code:
var inputString = tweet.text;
var findme = screen_name;
tweet.text = inputString.replace(screen_name, "<span class='searched'>" + screen_name + "</span>")
You're likely experiencing this issue because you're setting the string on the UI as text, not HTML. Elements have an innerHTML property which will create child elements if necessary.
DEMO
var inputString = "Hello Daniel!";
var findme = "Daniel";
var replacedString = inputString.replace(findme, "<span class='searched'>" +
findme + "</span>");
document.querySelector('#output').innerHTML = replacedString;
Try
.innerHTML
.replace outputs strings, not html
EDIT
var inputString = tweet.text;
var findme = screen_name;
tweet.text = inputString.replace(screen_name, "<span class='searched'>" + screen_name + "</span>")
SomeHTMLObject.innerHTML=tweet.text;
Found out the solution myself:
In the HTML page, you can should use HTML-escape. So you have to use {{{ variable }}} instead of {{ variable }}
Simple solution, should have thought about that..

HTML is coming out as plaintext

I am trying to add some text to an element, however it is all coming out as plaintext, even when there is an HTML element included.
for (i = 0; i < restext.length; i++) {
var p = document.createElement("p");
p.innerHTML = "<p>" + restext[i].innerHTML + "</p>";
document.getElementById("registererrors").appendChild(p);
}
However with this, it prints out the tag:
The name <em class="placeholder">name</em is already taken.
How do I make it so that it processes this tag too?
Change
p.innerHTML = "<p>" + restext[i].innerHTML + "</p>";
to
p.innerHTML = restext[i].innerHTML;
The problem is that after you create p element with document.createElement you add <p></p> inside of it. And inside of the inner p tag you insert other HTML code, which automatically gets escaped.

replaceWith inside each don't work with my own tag

Hello I have function which take text with my own tag and convert this tag to a:
//<link src="" title=""> -> title
function ProceedLinkTag(text) {
var items = text.filter("link");
items.each(function () {
var currentElement = $(this);
var title = currentElement.attr("title");
var source = currentElement.attr("src");
var newElement = $("<a>" + title +"</a>");
newElement.attr("href", source);
$(this).replaceWith("<a href='" + source + "'>" + title + "</a>"); //don't work
});
}
It work fine(it is detect my own tag even without close tag), I don't get any errors, but it is don't replaceWith().
Try it:
var text = "<link src='http://lenta.ru/' title='title'>";
ProceedLinkTag($(text));
alert(text);
I also try use it with close tag:
var text = "<link src='http://lenta.ru/' title='title'/>";
ProceedLinkTag($(text));
alert(text);
But it don't work too.
#sqykly find error:
Text in my instance was not a part of document. I change it and now it work.

addClass to variable and append jQuery

I'm having some problems when trying to add a class to a variable and then append this to another div. When I do this, the text appears but without the class I am trying to add to it. I am doing all of this with jQuery.
This is the code:
var names = $(this).attr('name');
var description = $(this).attr('description');
var url = $(this).attr('url');
$(names).addClass("nam");
$(div1).append( names + " " + description + " " + url);
});
I guess I am doing something wrong but can't see where.
You are creating a jQuery wrapper for name and adding a class to it but then you are appending the previous string reference instead of the jQuery wrapper to which the class was added.
Also you can't add class to a text node so try wrapping it with a span element(if name is not a html content like <span>some name</span>)
var names = $('<span />', {
text : $(this).attr('name'),
'class' : 'nam'
})
var description = $(this).attr('description');
var url = $(this).attr('url');
$(div1).append( names).append( " " + description + " " + url);
});
First off for this answer I am assuming we're using an xml string of the format you provided in your comment on op. Note - I did correct the syntax of the string to remove the extraneous semi colons.
var xmlstring = '<Blogs> <blog name="number1" description="1" url=" 1.com/"/> <blog name="number2" description="2" url="2.com/"/> <blog name="number3" description="3" url="3.com;" />" </Blogs>'
Now we can parse this string as expected into a jQuery object and use mostly as expected:
var $doc = $($.parseXML(xmlstring));
I'm assuming in your original example that this blog refers to one of these sub blogs so I'm going to say for my example:
var $this = $doc.find("blog:eq(2)");//the blog name=number3 in your example
//OR
var $this = $(this);//useful so we dont keep rewrapping
Okay so now we have our blog ($this) and we can append the contents to div1 as follows:
var names = $("<span>", {text:$this.attr('name'), 'class': 'nam'});
var description = $this.attr('description');
var url = $this.attr('url');
$(div1).append( names, description + " " + url);//as names is a span element
I tested this on an empty div and it produced the following outerhtml:
"<div><span class="nam">number3</span>3 3.com;</div>"
Hope this helped, I tried to explain steps because I'm not sure where what you're doing was deviating.

Categories