How to transform input value into string

Asked

Viewed 1,336 times

3

How do I transform the value of an input into a string, including if the user types HTML tags, with Javascript or jQuery.

<div class="val-input" contenteditable="true"></div>

$(function(){
    var val = $(".val-input").text();
});

I want the result to look like this if the user type an HTML tag (the quotes represent the string)

"<p class="teste">Ola mundo!</p>"

And not like this: 

Ola mundo!
javascript jquery html5

  • If the user has just typed, what you have works: http://jsfiddle.net/05cpys6q/

  • If I type some HTML tag inside the contenteditable it will only display the value from within the HTML tag

  • You withdrew the acceptance of the answer. Any errors in the answer? or missing any details?

  • I tried every way to use the he.js library, but at all times it didn’t work, even though I did exactly as in your example.

  • @Daviddamasceno added another option to answer with example as well. If you want you can make a jsFiddle that reproduces your problem with he.js for me to take a look... or else you can put here the code of your page.

  • Okay, thanks @Sergio , now yes it worked. Thanks for the help.

Show 1 more comment

2 answers

3


If I understand your problem well what you want is to escape the HTML tags so you can see the source code this way:

<p class="test">Hello world! </p>.

To do this you have to transform some of the symbols of this HTML string into their corresponding HTML entities.

I suggest you use a library for that like he js.

The code would look like this:

$(function(){
    var val = $(".val-input").html(); // aqui tem de ser .html()
    var text = he.escape(val);        // <- esta é a linha que queres
    $("#mostrador").html(text);       // aqui tem de ser .html()
});

example: http://jsfiddle.net/81w9bz2b/

Option for simple strings:

If strings are simple you can use this code:

 var entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
  };

  function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function (s) {
      return entityMap[s];
    });
  }

What the code does is to search the string for characters like &<>"'\/ and replace them in the string by their visual representation in HTML, which is in the object entityMap.

Example: http://jsfiddle.net/mp05z61p/

2

You can use .html() instead of .text().

In free translation the .html() :

Fetch the HTML content of the first element in the paired element set or define the HTML content of each matching element.

So

you can use the code below to get the content HTML of contenteditable

$(function(){
    var val = $(".val-input").html();
});

  • No friend, what I want is to transform into text (String) and not into html as . html() does.

  • if you do not pass the parameter to the .html() he will return you a streing with the html Which is the end of his loins, so that they may vary: val will have as value a streing.

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.