I have a function linking to a method for a JavaScript library I'm working on. Basically taking romanized Korean and converting it to specific Unicode sequences and re-inserting it into the DOM. The resulting strings that it generates are correct, but the re-insertion back into the DOM seems off...
For example: If I have the following in my DOM:
<ko>hangug-eo</ko>
The function is meant to convert it accordingly, replacing hangug-eo with 한국어 to show on the browser:
한국어 within the <ko> tags...
The function that does the string setting within the DOM is as follows:
function (){
var z=document.getElementsByTagName('ko');
for(x=z.length;x--;){
z[x].childNodes[0].data=kimchi.go(z[x].childNodes[0].data);
}
}
However, it seems that all this seems to be doing is just placing the &# Unicode entities straight into the DOM without it converting to their respective character equivalents... So all I'm seeing is 한국어
Can anyone please point out what I may be doing wrong?
kimchi.go() is the function that ultimately provides the Unicoded string...
You can always just set the text directly using textContent without having to use HTML entities:
z[x].textContent = '한국어';
But if you need to use HTML entities, just use innerHTML instead
z[x].innerHTML = kimchi.go(z[x].childNodes[0].data);
You can see the latter in the example below.
https://jsfiddle.net/nmL3to8w/1/
Related
Problem: using JQuery on HTML elements with Ids containing special characters.
Any special characters can be present anywhere within the Id. In 90% of the cases those are going to be spaces, full stops and dashes.
I think I found a Possible solution but can’t find any documentation that would support this.
Let’s say sElementId is an html element Id that has special characters in it.
Using the following syntax doesn’t work:
$('#'+sElementId).addClass("pointer");
but adding a pair of square brackets works like a charm:
$(['#'+sElementId]).addClass("pointer");
My question is. Is this the correct use of square brackets inside the selector?
Actually, it doesn't work, and does something you didn't expect.
From jQuery documentation:
jQuery( object )
object
Type: PlainObject
A plain object to wrap in a jQuery object.
So if you call $(["#a b"]) (or just $(["a"])) you'll get a jQuery wrapper object for that array-of-string. It looks like a typical jQuery selector object, but it isn't. addClass has no effect on that object.
$([1]).addClass("pointer") // no operation
To select the object, just use $(document.getElementById("a b")) ($() to convert it to a jQuery object).
Alternatively:
if there are multiple elements with the same id (note that this is invalid): javascript - Get multiple elements by Id - Stack Overflow
escape the id to use $(String.raw`#a\ b`) (or equivalently $("#a\\ b")): https://stackoverflow.com/a/4823616/5267751
Ok this one seems pretty simple (and it probably is). I am trying to use jQuery's replace with method but I don't feel like putting all of the html that will be replacing the html on the page into the method itself (its like 60 lines of HTML). So I want to put the html that will be the replacement in a variable named qOneSmall like so
var qOneSmall = qOneSmall.html('..........all the html');
but when I try this I get this error back
Uncaught SyntaxError: Unexpected token ILLEGAL
I don't see any reserved words in there..? Any help would be appreciated.
I think the solution is to only grab the element on the page you're interested in. You say you have like 60 lines. If you know exactly what you want to replace..place just that text in a div with an id='mySpecialText'. Then use jQuery to find and replace just that.
var replacementText = "....all the HTML";
$("#mySpecialText").text(replacementText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mySpecialText">Foo</div>
If you're only looking to replace text then jaj.laney's .text() approach can be used. However, that will not render the string as HTML.
The reason the way you're using .html() is likely illegal is that qSmallOne is not a JQuery object. The method cannot be performed on arbitrary variables. You can set the HTML string to a variable and pass that string to the .html() function like this:
var htmlstring = '<em>emphasis</em> and <strong>strong</strong>';
$('#target').html(htmlstring);
To see the difference between using .html() and .text() you can check out this short fiddle.
Edit after seeing the HTML
So there is a lot going on here. I'm just going to group these things into a list of issues
The HTML Strings
So I actually learned something here. Using the carriage return and tab keys in the HTML string is breaking the string. The illegal-ness is coming from the fact the string is never properly terminated since it thinks it ends at the first line. Strip out the white space in your strings and they're perfectly valid.
Variable Names
Minor thing, you've got a typo in qSmallOne. Be sure to check your spelling especially when working with these giant variables. A little diligence up front will save a bunch of headache later.
Selecting the Right Target
Your targets for the change in content are IDs that are in the strings in your variables and not in the actual DOM. While it looks like you're handling this, I found it rather confusing. I would use one containing element with a static ID and target that instead (that way you don't have to remember why you're handling multiple IDs for one container in the future).
Using replaceWith() and html()
.replaceWith() is used to replace an element with something else. This includes the element that is being targeted, so you need to be very aware of what you're wanting to replace. .html() may be a better way to go since it replaces the content within the target, not including the target itself.
I've made these updates and forked your fiddle here.
I am trying to write a series of functions that modify a form based on the values of an array.
My specific issue is that for my functions I am taking in a string of html. I apply that html to a div element and use jquery to make modifications to the html.
The specific types of modifications are mainly $("#target").show() and writing in some text here and there.
The problem I have is that none of my research or looking into this issue online has led me to finding a way I can then convert my modified html into a string. The condition being that I want this string to retain the changes I made from my $("#target").show() types of modifications.
Is it possible to make these types of modifications to a jquery object and then produce a string that reflects these changes in a plain string?
UPDATE thanks for your quick responses guys I've tried
.html()
.innerhtml
.outerhtml and a few other methods
The main thing I'm trying to find out though is:
I take an html string.
Apply it to a div using .html() and modify it so that particular elements do not show.
I then want to convert it back to an html string, so that when I apply it again, those same elements I manipulated with jquery with the .show() and .hide() methods will continue to be hidden and show.
Like I said I tried converting my modified element to html using .html and .innerhtml and when I apply it again the jquery/dynamic modifications are gone
Hopefully this makes everything easier to understand:
function main_selector(notiftype,array){
/**
- a function that recieves a type parameter and an array that invokes
the functions listed below
**/
var strings;
strings=importhtml();
strings=manipulateHtml(strings,notiftype,array);
strings= elemanipulateHtml(strings,notiftype,array);
strings=btnmanipulateHtml(strings,notiftype,array);
writeHTML(strings);
}
function importHtml( ){
/**
- a function that will import the html file and return it as a
a html string for manipulation
**/
var htmlstrings;
$.ajax({
url: "/*******",
global: false,
type: 'POST',
async: false,
success: function(result) {
htmlstrings=result;}
});
return htmlstrings;
}
function elemanipulateHtml(htmlstring,notiftype,array){
/**
- a function that will accept a string of html, a type parameter
and an array and will determine based on the type and the contents
of the array which elements in the form are shown, and what they
contain.
}
^ my issue is that I need a way to ensure that after I have executed my $("#target").show(); type statements in elemanipulate. I can convert the modified html to a string that will retain the fact that #target is hidden. I have tried using .html and the changes aren't retained so I'm trying to find out if there is a way to do this.
The jQuery method .html() returns the HTML string of the contents of a DOM element.
var html_string = $("#div").html();
I've got a complete HTML document I'm pulling in with $.ajax(), and my .done() callback looks like this:
function (data, text_status, jq_xhr) {
var $what_i_want = $(data).find('#what-i-want');
}
where data is a string that contains the entirety of a well-formed HTML document. This code never reaches .find().
Upon $(data), I get:
`Uncaught Error: Syntax error, unrecognized expression: <!DOCTYPE html>`...
The facts:
I'm using jQuery 1.9.0
The document is well-formed HTML5 according to the W3C validator.
I've used jQuery() to objectify many an HTML string, so I'm surprised this isn't working. Admittedly, I don't recall ever trying a whole document. Given the error, I'm guessing, perhaps, I need to escape this string somehow. But I'm not sure how.
Incidentally, this works:
var $what_i_want = $('#what-i-want', $.parseHTML(data))
But I can't figure out why the first approach fails.
I had this same issue in a case where it was working on all sorts of other pages. They key for me was reading Brian's link on the upgrade-guide. The issue was this one page had a single blank line before the so even though I was only attempting to insert a portion of the returned html, it was not considering the returned data to be html. From the upgrade guide
As of 1.9, a string is only considered to be HTML if it starts with a less-than ("<") character.
Since it started with a blank line and not < it was not considered to be html. Thought I would add this contribution since I spent forever trying to figure out what the issue was.
DOCTYPE isn't an normal html tag; I think it would need to be removed.
It might have trouble with body as well, since you can't embed a whole document within another. IIRC the internal method in jquery is just creating a span on the fly and updating the innerHTML.
I've inherited some pretty complex code for a web forum, and one of the features I'm trying to implement is the ability for spaces to not be truncated into only one. This is mainly because our users often want to include ASCII art, tables etc in their posts.
I first did this using a simple search and replace in javascript, which had the side effect of breaking HTML tags (eg <a href=....> became <a href=.....>).
I then tried doing this on server side, when the strings are retrieved, by having spaces converted before links and code people insert is converted to HTML. This works to a degree but it causes some issues with other parts of the code, for example where a message is truncated to appear on the home page, it might leave some of the space code, such as
Here is a message&nb
I think there may be a way to just alter the original javascript to achieve this - it just needs to only match spaces that are not inside a HTML tag.
The script I was using originally was message = message.replace(/\s/g, " ").
Thanks for any help you can provide with this.
You can use the pre element to include preformatted text, which renders spaces as-is. See http://www.w3.org/TR/html5-author/the-pre-element.html
Those docs specifically say one of the best uses of the pre element is "Displaying ASCII art".
Example: http://jsbin.com/owuruz/edit#preview
<pre>
/\_/\
____/ o o \
/~____ =ø= /
(______)__m_m)
</pre>
In your case, just put your message inside a pre tag.
Yes, but you need to process text content of elements, not all of the HTML document content. Moreover, you need to exclude style and script element content. As you can limit yourself to things inside the body element, you could use a recursive function like following, calling it with process(document.body) to apply it to the entire document (but you probably want to apply it to a specific element only):
function process(element) {
var children = element.childNodes;
for(var i = 0; i < children.length; i++) {
var child = children[i];
if(child.nodeType === 3) {
if(child.data) {
child.data = child.data.replace(/[ ]/g, "\xa0");
}
} else if(child.tagName != "SCRIPT") {
process(child);
}
}
}
(No reason to use the entity reference here; you can use the no-break space character U+00A0 itself, referring to it as "\xa0" in JavaScript.)
One way is to use <pre> tags to wrap your users posts so that their ASCII art is preserved. But why not use Markdown (like Stackoverflow does). There's a couple of different ports of Markdown to Javascript:
Showdown
WMD
uedit