2

I have function which gets the html generated in the iframe and replaces with custom tags.For eg.<b></b> tag is replaced with [b][/b]. likewise when i press tab key ,<span class="Apple-tab-span" style="white-space:pre"></span> is generated, how do i replace this with [tab][/tab] custom tag?.Please find the script which replaces bold tag, i tried replacing the whole span tag but it did not work.

Script:

function htmltoBBcode() {

var html = $("#textEditor").contents().find("body").html();
  html = html.replace(/\</gi, '[');
  html = html.replace(/\>/gi, ']');

  $("#custom-tag").text(html);


}

Any help much appreciated. Jsfiddle:

3 Answers 3

2

You can do it like this:

function htmltoBBcode() {
    var html = $("#textEditor").contents().find("body").html();
    html = html.replace(/\<span.*?\>/gi, '[tab]');
    html = html.replace(/\<\/span\>/gi, '[/tab]');
    html = html.replace(/\</gi, '[');
    html = html.replace(/\>/gi, ']');

    $("#custom-tag").text(html);
}

fiddle

Sign up to request clarification or add additional context in comments.

3 Comments

Thank you so much.. this did it .. :-)
Make sure you keep it in this order or it will fail badly - if you have a few I'd recommend doing the whole tag e.g. <b> to [b] instead of just <
@DarrenSweeney actually I would keep it how he has it because probably most of the tags he wants to replace don't have attributes with them. The span is a special case since it has attributes that need to be cleared also. I would put all special cases before the replace all < [ > ] that way all special cases will be handled first then all other regular cases will be handled without having to specify each case individually...
1

Very easy!

$('p').click(function(){
  var t = $(this).prop('outerHTML').replace(/</g, '[').replace(/>/g, ']');
$('#custom-tag').text(t);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click me!</p>
<div id="custom-tag"></div>

3 Comments

i have already implemented this, for the bold tag, please see the fiddle. i am trying to match the whole span tag here <span class="Apple-tab-span" style="white-space:pre"></span> into [tab[[/tabs]. any idea how to do it.thank u for ur help
i had already implemented this , for bold tab, was trying to match the whole span and replace with custom [tab] tag. Thanks for ur help .
@Pbk1303 you can convert <span> tag to a string and replace it, just like my example. Using .prop('outerHTML')
0

retrieving text from body tag will encode it as html, I thought you could save anywhere in a temporary textarea to decode it, than replace in the output, like this:

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

To replace your span tag, replace your regex like this:

html.replace(/<span>(.+)<\/span>/, '[tab]$1[/tab]');

See updated fiddle

Hope it will help! :)

2 Comments

i don't understand , am trying to replace the whole span tag into custom tag [tab][/tab],i replaced the bold tag into [b][/b]. i am tryin to do the same here.
Please check the updated answer, I forgot the span replace part ^^

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.