I have the following code snippet to convert html to javascript, but I seem to be facing an issue with the output when bound to a textarea and I am not able to figure out what the issue could be.
var html_to_text = $('#source').val().replace(' ', ' ').replace(/<[^>]*>/g, '').replace(/(<br>)+/g, '<br>');
The output is correct when displaying on an alert, but, when the same is bound to a text area, there is a lot of white space on it. Could someone help me understand what could be the issue with the above snippet.
I have a working sample of the same at http://jsfiddle.net/technicaliti/uuxDx/
Add .replace(/\s{2,}/g, '\n\r') to the end.
.replace(/\r?\n|\r/g,"");
This one removes only multiple newlines (taken from this answer) so you still get a nice format
Demo fiddle
Just replace the line break with nothing.
html_to_text = html_to_text.replace(/\n/g, '');
Related
I'm building a Javascript based UI that generates code based on the UI. I got the code generation working. the code is saved in a string. I tried formatting it, indenting it, but I don't know how anymore. Is there a way to put out the code formatted?
For example if I have this string:
"<body><div><h1>Hi</h1></div></body>"
being output like this:
<body>
<div>
<h1>
Hi
</h1>
</div>
</body>
right now I'm outputing like this:
$(".output").text(string);
Take a look at code tag in html. Show your string wrapped by code tags
<code>your string</code>
Or use text area. https://jsfiddle.net/sureshatta/k1atgn6o/1/
If you are trying to achived the formatted output please have a look at Template literals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
.text() use for Change the Text of any Tag.
$(".output").text(string);
.html() is use for Add the String with the Tag.
$(".output").html(string);
If you want to display code that is correctly indented and colorized, you can use a library to do that, such as highlighjs.
I'm not sure it does auto indentation, but the algorithm for that isn't that hard: just add newline and enough spaces when opening a new html tag (recursion will make this way easier).
Also, you can use js-beautify.
I am using Jquery plugin dotdotdot.. (http://dotdotdot.frebsite.nl/).
I am facing some issues with it.
When I am applying it on my long text in Japanese, it is not working correctly and showing blank instead of truncated text.
I am using wrap:word.
Text I am using is : 筋肉のブレを抑え、さらなるパフォーマンスをサポート独自の段階着圧により効果的に筋肉のブレを抑える高機能ソックス
Expected result : it should show truncate result but its showing blank.
Can anyone please suggest on it..
Regards,
Ritesh
This was fixed as of version 1.6.9.
JSFiddle
However, it is still not working properly if there is a space at the beginning of the sentence.
Works:
<div id="wrapper">筋肉のブレを抑え、さらなるパフォーマンスをサポート独自の段階着圧により効果的に筋肉のブレを抑える高機能ソックス</div>
Doesn't work:
<div id="wrapper"> 筋肉のブレを抑え、さらなるパフォーマンスをサポート独自の段階着圧により効果的に筋肉のブレを抑える高機能ソックス</div>
I'm trying to align the text in the menu at:
http://crango.uofydating.com/dir/New2.html
In the 1st tab, I want there to be a line break after "Item".
In the 2nd and 3rd tab, I want there to be a line break after "This is".
I only posted the part of the menu that I need help with, so it may look a bit odd. But it is connected to some Javascript code which makes it more challenging to edit. The JS can't be removed.
Here is your solution
I have created a fiddle for you
Use .html() instead of .text()
CODE:
.html('<strong>' + $(this).find('a').html() + '</strong>')
It works great ;)
Check it
Fiddle http://jsfiddle.net/krunalp1993/yL6Tn/1/
Hope this helps you :)
In your js code, you are setting back to your original text inside strong tags with .html inside the .click method. So just insert the line break in there.
Insert break in this line in your js:
.html('<strong>' + $(this).text() + '</strong>')
I have a ( probably very unclean) script that I intend to convert letters put into a text field into html image tags with corresponding pathways. I know there are probably easier ways of doing this, PHP for example however I am using it as a bit of an experiment to familiarise myself further with JS/Jquery. I have overcome a few obsticles to get where I am now as most of this is new ground for me.
In some cases the letters will have multiple images associated with them that will be selected at random so there are a couple of lines included which do this. These are fine however, the issue comes with the section of code that replaces the letters from the text field with the text and variables that make up the image tag. Whilst they work fine individually, when I want to convert multiple letters the replace overwrites instances of that letter in the previously generated image tag. Any ideas can I stop this? I've tried shifting the points at which the script occurs around but it seems the whole thing is somewhat fragile and haven't been able to create a workable solution.
Code in question:
// replace all instances within variable to generate thumbs
final_result = result.replace(/a/g, str_start+chosen_folder+"a"+random_variation+str_end)
.replace(/e/g, str_start+chosen_folder+"e"+random_variation+str_end);
JS Fiddle here: http://jsfiddle.net/N77wZ/
Many thanks in advance !
Do only a single replace:
final_result = result.replace(/a|e/g, str_start+chosen_folder+"$&"+random_variation+str_end);
I am trying to learn basic javascript and using jsfiddle as my tool of choice to play around with code. I've found I really learn through working examples I can see output for.
However, I find when I do something along the lines of the following, both lines are displayed on the same line:
document.writeln("This is Line One");
document.writeln("This is Line Two");
i.e. http://jsfiddle.net/u1sonderzug/NVSsy/
I understand as a beginner I might be going about doing this in the completely wrong way, so I'd like to understand best practices.
In html, <br> is for new lines.
document.writeln("This is Line One<br>");
This is not an issue of Javascript but an issue of HTML : println adds a carriage return at the end of the text but it has no effect in HTML because html doesn't take care of those characters. So you have to to :
writeln("....<br/>");
where is the html tag for carriage return;
OR
<pre>
writeln("...");
</pre>
*if your javascript is wrotten in the html page. Where is a balise to say to html he has to read every character including the carriage return added by writeln.
Anyway you should try to find tutorials for html and DOM, it's far more powerfull that this println and it's standard :)