Surround Hebrew and English text in div

Question

I am trying to add a span tag around Hebrew and English sentence in a paragraph. E.g. "so היי all whats up אתכם?" will become :

[span]so[/span][span]היי[/span][span]all whats up[/span][span]אתכם[/span]

I have been trying with regexp but its just removing the Hebrew words and joining the English words in one span.

var str = 'so היי all whats up אתכם?'
var match= str.match(/(\b[a-z]+\b)/ig);
var replace = match.join().replace(match.join(),'<span>'+match.join()+'</span>')

Answer 1

I think the Regex you want is something like [^a-z^\u0591-\u05F4^\s]. I'm not entirely sure how you want to handle spaces.

My solution

Copy str to a new var res, replacing any characters that aren't A-Z / Hebrew.
Loop over any english (a-z) characters in str and wrap them in a span, using res.replace.
Do the same again for the Hebrew characters.

It's not quite 100%, but seems to work well enough IMO.

var str = 'so היי all whats up אתכם?';
var finalStr = str.replace(/([^a-z^\u0591-\u05F4^\s])/gi, '');

var rgx = /([a-z ]+)/gi;
var mat = str.match(rgx);

for(var i=0; i < mat.length; ++i){
    var match = mat[i];
    finalStr = finalStr.replace(match.trim(),'<span>'+match.trim()+'</span>');
}

rgx = /([\u0591-\u05F4 ]+)/gi;
var mat = str.match(rgx);

for(var i=0; i < mat.length; ++i){
    var match = mat[i];
    finalStr = finalStr.replace(match.trim(),'<span>'+match.trim()+'</span>');
}

document.getElementById('res').innerHTML = finalStr;

http://jsfiddle.net/daveSalomon/0ns6nuxy/1/

Answer 2

Previous answers here did not account for the whole word requirement. Indeed, it is difficult to achieve this since \b word boundary does not support word boundaries with neighboring Hebrew Unicode symbols that we can only match with a character class using \u notation.

I suggest using look-aheads and capturing groups to make sure we capture the whole Hebrew word ((^|[^\u0590-\u05FF])([\u0590-\u05FF]+)(?![\u0590-\u05FF]) that makes sure there is a non-Hebrew symbol or start of string before a Hebrew word - add a \s if there are spaces between the Hebrew words!), and \b[a-z\s]+\b to match sequence of whole English words separated with spaces.

If you plan to insert the <span> tags into a sentence around whole words, here is a function that may help:

var str = 'so היי all whats up אתכם?';
//var str = 'so, היי, all whats up אתכם?';
var result = str.replace(/\s*(\b[a-z\s]+\b)\s*/ig, '<span>$1</span>');
result = result.replace(/(^|[^\u0590-\u05FF])([\u0590-\u05FF]+)(?![\u0590-\u05FF])/g, '$1<span>$2</span>');
document.getElementById("r").innerHTML = result;

span {
    background:#FFCCCC;
    border:1px solid #0000FF;
}

<div width="645" id="r"/>

Result:

<span>so</span><span>היי</span><span>all whats up</span><span>אתכם</span>?

If you do not need any punctuation or alphanumeric entities in your output, just concatenated whole English and Hebrew words, then use

var str = 'היי, User234, so 222היי all whats up אתכם?';
var re = /(^|[^\u0590-\u05FF])([\u0590-\u05FF]+)(?![\u0590-\u05FF])|(\b[a-z\s]+\b)/ig;
var res = [];
while ((m = re.exec(str)) !== null) {
    if (m.index === re.lastIndex) {
        re.lastIndex++;
    }
  if (m[1] !== undefined) {
      res.push('<span>'+m[2].trim()+'</span>');
    }
  else
    {
      res.push('<span>'+m[3].trim()+'</span>');
    }
  
}
document.getElementById("r").innerHTML = res.join("");

span {
    background:#FFCCCC;
    border:1px solid #0000FF;
}

<div width="645" id="r"/>

Result:

<span>היי</span><span>so</span><span>היי</span><span>all whats up</span><span>אתכם</span>

Answer 3

Judging by this post you can try something like this: ((?:\s*\w+)+|(?:\s*[\u0590-\u05FF]+)+?(?=\s?[A-Za-z0-9!?.])) https://regex101.com/r/kA3yV5/4

You may need to edit it for your particular cases (for example, if some non-word characters start to appear), but it does the trick. It tries to match words and form sentences from English character list, if it doesn't work, it tries to make words/sentences out of Hebrew character list, until an english character is spotted again.

It's not perfect yet, as you may want to add other punctuation characters and there's some spaces you don't want in the 1st position (because javascript doesn't support lookbehinds, I didn't figure out a good way to remove them on the spot, but they can be at position 1 and removed from string)