We Keep Coding

Regular Expression, replace specific letter between html tags

I am having problems with regular expression replacement on html document. I need to find some specific letter in html text nodes and replace it with a different letter.
Lets say for example I want to replace letter "e" with letter "x".
My string may look like this:
<div class="some class" style="display:block">some text here</div>
so after replacement it must be:
<div class="some class" style="display:block">somx txxt hxrx</div>
As you can see, all html structure is still the same, only text between > and < has been affected.
Thank you for the help!

Since your question is tagged javascript, you can easily replace text content of your <div> without worrying about affecting tag attributes using String.prototype.replace() like this:
var el = document.getElementById('my_div');
var html = el.innerHTML;
html = html.replace(/e/g,'x');
el.innerHTML = html;
<div id="my_div">some text</div>

Ok, maybe some one will find my answer useful. I try (for example) to replace all German letters to normal english char in my HTML document. And this is my solution for my own question.
Need to download Sublime text editor. All files and manuals you can be find here Sublime text 2
It has nice and claver "find and replace" tools build in.
Than after long hours learn I find "regReplace" plugin is best for for this needs. It crates separate regExp rules and run it one by one over same
selection.
To download plugin you need to read some pages on plugin developer website RegReplace Sublime plugin
After you crate rules for each letter, you can use build in "find" tool to select all between tag using:
>.*?<
then you press "find all" and apply all regReplace rules to selected text.

String with new line and tabs to display in HTML

I have a string coming from my java backend which is formatted to display in a certain way, the new line, tab and space characters are in certain positions.
How do I get this to display the same way in HTML?
For example, say I have the current string in Javascript as so:
var str = "\t\tTitle \n Some text \t\t\t more text";

Browsers typically strip out extra white space, you might need to put it inside a preformatted text block or use white-space: pre
var pre = document.createElement("pre");
pre.innerHTML = str;
document.appendChild(pre);
Also yes, you need to use backslahes too, as mentioned about.

I might be late but just in order to help if a beginner like me is facing this kind of problem.
You can add a css class to the html tag where you want to display the data. In my case I am using ngFor of Angular 2. The data coming from my back end had line breaks and tabs. So I just added a class to the html tag with a css white-spacing style as follows.
Backend Data"title": "postIssueResponse() {\n\tthis.parent.postIssueResponse(this.issueId, this.newResponse);\n console.log(this.newResponse);\n this.newResponse \u003d \"\";\n}"
<p class="response-title">{{myData?.title}}</p>
And the css
.response-title {
white-space:pre;
}
This one do the job perfectly.

You can use textarea also. here is a Working Fiddle
MDN textarea

Special symbols in wysihtml5 editor

I use wysihtml5 editor on my site and I would like to have the following functionality - if user inserts text with special characters they are transformed to html entities.
For example, user inserts:
"Sample text, sample text, sample text ©"
I need to transform it to:
"Sample text, sample text, sample text ©"
I didn't find any information related to special symbols in editor docs. One of the method I think about is to create listener for paste event and process special characters at this step.
Could you advice what is the best way to add this functionality to the editor?

you can use a RegExp character range to replace() them using a dynamic function:
strNew=strOld.replace(
/([\u00A0-\u00FF])/g,
function(j,a){
return "&#" + parseInt(a.charCodeAt(0), 16) + ";" ;
}
);
live demo : http://pagedemos.com/27w7n4n58qpk
this could be applied from the string you get back from your editor, or i guess, on the innerHTML of the editor's contenteditable tag.

Mustache.js allow only line breaks, escape other HTML

I am creating comments from user input and rendering them using Mustache.js after a user clicks 'submit'. I realize I can replace user input line breaks (\n) with <br/> to render as HTML breaks, such as
myString.replace(/\n/g, '<br />');
and I realize I can make Mustache not escape HTML by using triple brackets
{{{myString}}}
However, I would like to escape all user HTML as Mustache would typically do with double braces {{ ... }}, with the exception of allowing line breaks with <br/>
What is the best way to do this? I can replace the line breaks after it has been rendered, but that seems like a very inefficient solution, and I'm thinking there has to be a better way.

Option 1 - Use a pre tag:
It's actually best (or efficient) that you wrap text in a <pre></pre> tag, which will preserve the white space in the text.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
And enable word-wrap
How do I wrap text in a pre tag?
- http://jsfiddle.net/X5ZY7/
Option 2 - Split your string into lines, and use a mustache each:
comment = userComment.split("\n")
{{#comment}}
{{comment}}<br/>
{{/comment}}
Option 3 - Manually escape your string using your favorite method before injecting the tags:
var div = document.createElement("div")
div.textContent = comment
comment = div.innerHTML.replace(/\n/g, "<br/>")
{{{comment}}}

If you're looking to add line breaks to a textarea you need to replace \n with

Make my textbox understand html img tag

When inserting a new emoji inside my textbox i want to be displayed as the emoji image and not the emoji symbol how can i do that like instead of ( ':)'--> put the image represent it inside my textbox )

One way: Instead of a text box, use a <div contenteditable="true"></div>. As the user types, change occurrences of the smiley for the image. When the form is submitted, your javascript needs to translate the contents of that div back into plain text and put it into a field for submission.

If you want to use images, then it would require you to change your HTML significantly. You would need to make use of the Content Editable functionality on something like a <span>, rather than a regular input box. You'd then need JavaScript code to monitor keypress events and whenever it sees a :) (or whatever), it replaces the code with the appropriate <img>.
A quick-and-dirty solution that sticks with your text box, however, would be to use the same approach, but use the Unicode emoji characters (rather than images). This will only work on platforms with the appropriate font glyphs -- although the common smilies are more widely supported -- but it gives you the idea:
HTML:
<input class="emojify" type="text" />
JavaScript (using jQuery, to make everyone's life easier):
$(document).ready(function() {
// Map plaintext smilies to Unicode equivalents
var emoji = {
':)': '\u263a',
':(': '\u2639'
},
// Function to escape regular expressions
reEscape = function(s) {
return s.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
};
$('input.emojify').keyup(function() {
var text = $(this).val();
// See if any of our emoji exist in the text and replace with Unicode
$.each(emoji, function(plaintext, unicode) {
text = text.replace(new RegExp(reEscape(plaintext), 'g'), unicode);
});
// Replace text with new values
$(this).val(text);
});
});
Here's a working demo on jsFiddle. Note that the caret position will be reset every time the keyup event is triggered. I'm sure you can work around that somehow, but this code suffices to illustrate the process.