jQuery Replace text in string with multiple choices?

[jmansa]

I'm trying to create a script which allows me to replace text or html tags in realtime. Here is what I got so far.

PHP Code:

$str = '<b>Hey!</b> This is a <b>test!</b>';

echo '<div id="strDiv">';
echo $str;
echo '</div>'; 


$('#rbtn').click(function() {
	$('#strDiv').each(function() {
		var from = '<b>',
        	text = $(this).html().replace(from, '');
        $(this).html(text);
    });
});

This works if I only have one replace to work with, and by the way... It. only replaces the first <b> and I want it to replace all <b> tags in the string!

I want to make an multiple selectbox with some options to replace from the string like this:

PHP Code:

<select name="test" multiple="multiple">
    <option><?=htmlentities('<b>');?></option>
    <option>Hey</option>
    <option>This</option>
    <option>!</option>
</select>

So if I hit the first option it would remove/replace all incidents of this option in the string. If I deselect it again I want it to reinsert it into the string again.

I'm a bit stuck and need some help. Please....

Thanks in advance ;-)

[Amphiluke]

You may use regular expressions to replace all the occurrences of a substring from the target string.

$('#rbtn').click(function() {
    var from = /<\/?b>/gi,
        div = $("#strDiv");
    div.html(div.html().replace(from, ""));
});

[jmansa]

Originally Posted by Amphiluke

You may use regular expressions to replace all the occurrences of a substring from the target string.

$('#rbtn').click(function() {
    var from = /<\/?b>/gi,
        div = $("#strDiv");
    div.html(div.html().replace(from, ""));
});

Well the issue is that the options in the select box would be html tags found in the string like this:

PHP Code:

$results = preg_match_all('~<([^/][^>]*?)>~', $str, $arr); 
$arr = array_unique($arr[1]);
    
foreach($arr as $arr1=>$value){
    echo '<option value="">'.htmlentities('<'.$value.'>').'</option>';
} 


[Amphiluke]

Maybe I don't catch the problem, but why not go over all the options in the select box and pass the target string through the series of RE?
Something like this:

<form id="texts" method="get" action="#">
    <select id="tags" name="test" multiple="multiple"> 
    <option>&lt;b&gt;</option> 
    <option>&lt;i&gt;</option> 
    <option>&lt;u&gt;</option> 
    <option>&lt;q&gt;</option> 
    </select>
    <input type="button" value="go!" onclick="foo();"/>
 </form>

 <script type="text/javascript">
    function foo() {
        var s = "dj j<i>___</i>rie<b>er</b> dr<q>fdf</q> rjs<u>uuu</u>",
            sel = document.getElementById("tags"),
            re;
        for (var i = 0, len = sel.options.length; i < len; i++) {
            if (sel.options[i].selected) {
                re = new RegExp(sel.options[i].text.replace("<", "<\\/?"), "gi");
                s = s.replace(re, "");
            }
        }
        alert(s);
    }
 </script>

[jmansa]

Originally Posted by Amphiluke

Maybe I don't catch the problem, but why not go over all the options in the select box and pass the target string through the series of RE?

Now that is getting close. But one problem still? Lets say the text has a html tag like this:

<div id="mytest">lkhkjh</div>

Then it doesnt get executed... Any ideas?

[Amphiluke]

In that case one only needs to improve slightly the regular expression

<form id="texts" method="get" action="#">
    <select id="tags" name="test" multiple="multiple"> 
    <option>&lt;b&gt;</option> 
    <option>&lt;i&gt;</option> 
    <option>&lt;u&gt;</option> 
    <option>&lt;q&gt;</option> 
    </select>
    <input type="button" value="go!" onclick="foo();"/>
 </form>

 <script type="text/javascript">
    function foo() {
        var s = "dj j<i class='class'>___</i>rie<b id='id'>er</b> dr<q title='title'>fdf</q> rjs<u>uuu</u>",
            sel = document.getElementById("tags"),
            re;
        for (var i = 0, len = sel.options.length; i < len; i++) {
            if (sel.options[i].selected) {
                re = new RegExp(sel.options[i].text.replace("<", "<\\/?").replace(">", "[^>]*?>"), "gi");
                s = s.replace(re, "");
            }
        }
        alert(s);
    }
</script>

[jmansa]

Originally Posted by Amphiluke

In that case one only needs to improve slightly the regular expression

Oh yes... Thanks, now I only need to figure out how to make this jQuery and update teh text in realtime and not as alerts... Thanks though :-)