Develop Reference

Only allow certain tags in contenteditable div

I have a contenteditable div and using keyboard shortcuts like ctrl+i the user is able to format the text. And as they type the innerHTML changes reflecting the tags i.e:
Hello <i>thanks for <br><br>for showing up<b> y'all b</b></i>
This is fine, and works well for my purposes. but the issue arises that when I go to print the html in a different div IF a user adds any other html tags, they could really mess up the application.
For instance, if they added a <script> tag or style etc.. How do I make it that the user is only allowed to add <i>, <br>, <b>, <s>, and without being able to add anything else?
Any ideas? Thank you

I think that you can use a regExpresion to avoid the "indeseables" tags. Some like
<textarea #data [(ngModel)]="value" (input)="replace(data)"></textarea>
<div [innerHtml]="valueParse">
</div>
replace(control:any)
{
this.valueParse=control.value.replace(/<(?!br|i|u)((\w+))>/gm,"&lt$1&gt")
.replace(/<\/(?!br|i|u)((\w+))>/gm,'&lt\/$1&gt');
}
See stackblitz

How can some HTML code be isolated from the rest of the webpage?

I'd like to allow the user to customize their user name using HTML tags, without restrictions.
The only problem I've found is they not closing tags...
Ex: (a user name with not closed tag: my<b>nick)
mynick: comment textinnocent user: comment text
I searched for a tag like <sandbox> my <b>nick </sandbox> or any way to force closing every open tag, but I have not been lucky.
Desired result:
mynick: comment textinnocent user: comment text
Is there any smart way to achieve this? (Only using HTML or JS/JQuery)

If you have any incomplete tags, the browser automatically tries to close it(doesn't seem to happen if you have an HTML code following).
If you look at this fiddle https://jsfiddle.net/hwpLyow0/1/
I have the HTML inside the DIV asHello <b><i>World!
But when I alert the HTML from the DIV I get
Hello <b><i>World!</i></b>
I would suggest using jQuery's .html() function or JavaScript's .innerHTML to get the HTML with tags closed.
EDIT:
If users are typing it in textbox, creating a new element(not appending it to document) will do the work for you.
var fix = document.createElement("div");
fix.innerHTML=document.getElementById("test").value;
Fiddle: https://jsfiddle.net/hwpLyow0/3/

Replace parts of string (attributes) in textarea using input boxes

Main Target :
To create a website that will have a live preview of an HTML/CSS code.
More specifically :
The HTML/CSS code will be editable form the user in some specific parts. So, the code in the live preview will not derive from text areas but from divs.
Image of what I am trying to do :
So, in my Previous Question I tried to find a way to make the live preview box work after getting the code from the black boxes. It did not work because the code was given in a div tag and not a textarea. I would like to add that the code in the div tags use xmp tags because some parts are editable from the user.
Now, I have replaced the divs with textarea tags but the EDIT function does not work.
Main Question :
How do I edit parts of a textarea text? Below, I made it work for a div tag but not a textarea. How can I make the following work for a textarea?
$('input#thebox1').keypress(function(e) {
console.log($(this).val());
if(e.which == 13 && $(this).val().length > 0) {
var c = $(this).val();
$('.popup1').removeClass().addClass(c).text(c);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Replace Title Background Color: </div><input type="text" id='thebox1'>
<div id="copyTarget1" class="innerbox css">
<blockquote>
<pre>
<code>
.title
{
background: #<b class="popup1" style="color:#FF0000;">value </b>;
vertical-align: middle;
}
</code>
</pre>
</blockquote>
</div>
<br><br><br><br><br><br>

I thought about taking another approach to make your life easier using Ace (Cloud9 Editor). It is an awesome solution to get code editors for different languages. All built in JavaScript. It is quite easy to integrate. I just downloaded it to create the case you are trying to build.
You can find the example I have just made here: https://dubaloop.io/dev/html_css_js_editor/
Basically, you load the library for ace:
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
Then you create a "pre" container for your HTML, CSS, JavaScript editor:
<pre class="editor" id="editor_js">
function foo(items) {
alert('works');
}</pre>
You will be able to convert them into code editor by using the function:
var editor_js = ace.edit("editor_js");
editor_js.setTheme("ace/theme/monokai");
editor_js.session.setMode("ace/mode/javascript");
It will generate a nice code editor that can through error, warnings, etc. You also have different themes. It is very user friendly as you could see. In my example I just get the content of each code container and send it to an blank iframe that. In order to retrieve the content you can use:
editor_js.getValue();
Check the source code for example I sent you above. I also created .zip with the example here: https://dubaloop.io/dev/html_css_js_editor/example.zip
Have a look to see if this would work for you.
GitHub repo for ACE: https://github.com/ajaxorg/ace-builds
I hope it helps.
UPDATE:
I decided to update the response to replay to your last comment. A few things about it:
First, I updated the code in the link I sent you previously: https://dubaloop.io/dev/html_css_js_editor/
The idea was to check the guide to see how you can manipulate the input and adjust it to what you need. They have great manipulation options. This is the guide: https://ace.c9.io/#nav=howto&api=editor
I just made a short version of what you are trying to do: I am replacing the content for the <h1> in HTML editor, by entering it in a textfield input; similar to what you are trying to achieve. I set the html code editor as a readonly so you cant edit on it. Have a look and let me know.
Second, I created another example using your code. You can check it here: https://dubaloop.io/dev/html_css_js_editor/example.html
I noticed that the first problem you were having was related to how you were triggering the preview update ($('.innerbox').on("keyup"...)). There was not keyup event there. For now I set it on any input when you hit enter. The other big problem, and probably the main one you had was how you were accessing the iframes through jQuery. You need to use $('selector').contents().find('selector2'). Finally another problem was the you were retrieving the data getting the attribute value from your code wrapper. What you need to get is the actual content as flat text in order to avoid other html content. In order to do that you need to use .text() (Please check the updated GetHtml() and GetCss() functions).
I hope you can make it work from here. Still, I like option 1 :P
I hope it helps.

Javascript innerHTML with Popup

I can't understand why this inner html script isn't working. I posted the javascript on jsFiddle. You can see it here: http://jsfiddle.net/JyV73/1/
I have two versions of the link. In the first the rewrite link is within a popup that needs to be closed and another opened with the proper text within the textarea.
In the second, there is just a link on the page that when it is clicked should hopefully open the popup with the proper text within wht textarea.
The only problem is that it doesn't work for the second version because of I must close the popup. If I comment out that first document.getElementById(id).style.display = 'none' then the plain link works, so my first thought is to create two function. But since this javascript is part of a php template file that is included I think it would be simpler on the php code to just solve this using pure javascript.
I'm still learning javascript, and any help would be appreciated. I hope I was clear. Thank you so much.
HTML
open
<div id="popup" class="popup"> Rewrite
</div>
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
<!-- This is the stuff that doesnt work for some reason Rewrite
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
-->
The Javascript
function rewrite(id, text) {
document.getElementById(id).style.display = 'none';
document.getElementById('new-text').innerHTML = text;
}

I am not entirely clear on what you are trying to do here, but from the way I read your code you want to set the value of the text area to a specific value.
here is how you do that: http://jsfiddle.net/JyV73/9/
function rewrite(id, text) {
$('#new-text').val(text);
}
You're not using pop-ups, you're using modals, which means its' a div inside the page that toggles visibility. You can access information from those components whether they are visible or not, fyi.
Still, Im not entirely sure on what you're trying to do here.

I changed document.getElementById('new-text').innerHTML = text; to document.getElementById('new-text').value = text; because it's the value attribute of the text box which you want to set.
Also each element on the page with an ID needs to have a unique ID (it seems like you might have been trying to reuse IDs at one point but maybe I'm wrong!)
I still haven't worked out exactly what you're trying to achieve but those changes needed to be made no matter what.
This code is sufficient to achieve your second goal though: http://jsfiddle.net/JyV73/19/
I added an onClick attribute (onClick="rewrite('popup', 'blah')") to your "open" link to do the writing to the textbox. :)

Javascript: document innerHTML replace breaks forms

I'm currently trying to replace a piece of plain text in a page that also contains a form. I am aware that upon replacing code containing a form, the form elements get recreated. This can break forms (and it does on the webpage I'm manipulating).
Usually, I go about this by using the "getElementsByTagName" function, to make sure that I don't need to replace the code containing the form and this has always been possible so far. However at this point, I have arrived at a page where the smallest tagname is a div that contains the text I need to replace and a form. This div is further subdivided in tables so initially I thought "let's get elements by table", but exactly the piece that I need to replace is not subdivided in a table.
So I used this code to replace:
document.documentElement.innerHTML = document.documentElement.innerHTML.replace(RegEx, replaceString);
Of course, this breaks the form on the page, which is not wanted behavior.
Does anyone have any idea how to go about this without breaking the form? Is it possible to somehow get a reference to the part of the div that does not contain a table? Is it possible to alter just part of the code? Right now I take an instance of the code, replace the matches in the instance, and then overwrite the original code with the altered instance. I once remember trying document.documentElement.innerHTML.replace(RegEx, replaceString); on another page but this only returned an instance of altered code, it did not alter the original code.
This is part of the page:
<div class="BoxContent" style="background-image:url(http://static.tibia.com/images/global/content/scroll.gif);">
<TABLE></TABLE>
<BR>
Some text here.
<BR>
And some more.
<table></table>
<table></table>
</div>
I need to do some changes in the text between the tables.
I have looked around on SO and found similar question about adding things to a form with innerHTML, but this did not help my cause. So, all help is appreciated here!
Kenneth

Here - plain JS
DEMO
window.onload=function() {
var nodes = document.getElementsByClassName("BoxContent")[0].childNodes;
for (var i=0,n=nodes.length;i<n;i++) {
if (nodes[i].nodeType==3) {
// console.log(nodes[i].textContent)
nodes[i].textContent=nodes[i].textContent.replace(/some/gi,"Lots");
}
}
}