Back

Technologies:

javascriptjavascript
avatar
Tolerim
25 days ago

How do I fix an issue where special characters are preventing the JavaScript highlight from working?

The highlighted word function is experiencing issues when special characters, such as parentheses or backslashes, surround the word since they prevent the word from getting highlighted. Although performing a split on non-letter characters resolved the problem, the special character was removed from the search results. To preserve the special character and ultimately highlight the target word, the code can be updated to only split on spaces. The function loops through each word and checks if it meets the search criteria and if it does, it gets highlighted while maintaining any preceding or trailing special characters. Here's the updated code: 

highlight: function (value) {
        try {
            if (value) {
                var words = value.split(' ');
                var len = words.length;
                var searchTerm = RRS.Search.Query.Value.trim().toLowerCase();
                var searchTermLen = searchTerm.length;

                for (var i = 0; i < len; i++) {
                    var currentWord = words[i];
                    var regex = new RegExp("^\\W*(.*?)("+searchTerm+")([\\W]*)$", "ig");
                    
                    currentWord = currentWord.replace(regex, function(match, p1, p2, p3) {
                        return p1 + "" + p2 + "" + p3;
                    });

                    words[i] = currentWord;
                }
                return words.join(' ');
            } else {
                return value;
            }
        } catch (e) {
            edmscPage.HideWaitScreenDialog();
            alert("Report->Highlight\n" + e.message);
        }
    },
Answers(2)
avatar
Vogi
24 days ago
Verified Answer
It seems like you have updated the code to only split on spaces instead of non-letter characters. This way, the special character is preserved and the target word is highlighted while maintaining any preceding or trailing special characters. Is there anything else you would like me to help you with?
avatar
Tolerim
25 days ago
The issue with the current implementation is that it is only considering spaces as the delimiter for splitting the text into words. All non-letter characters are being treated as part of the word which is causing issues when searching for a word that has special characters around it. One solution to this could be to split the text using a regular expression that considers all non-letter characters as delimiters. Here is an updated code snippet that does this: 
try {
    if (value) {
      var words = value.split(/[^A-Za-z]+/); // use regular expression to split text
      var len = words.length;
      var searchTerm = RRS.Search.Query.Value.trim().toLowerCase();
      var searchTermLen = searchTerm.length;

      for (var i = 0; i < len; i++) {
        if (words[i].length >= searchTermLen) {
          var word = words[i].toLowerCase();
          var isMatch = true;
          var term = "";
          var startIndex = 0;
          var startTerm = "";
          var k = 0;

          if (word.indexOf('-') > -1) {
            while (word[k] != '-') {
              startTerm += word[k];
              k++;
            }
            startTerm += word[k];
            k++;
          }

          for (var j = 0; j < searchTermLen; j++) {
            if (word[k] != searchTerm[j]) {
              isMatch = false;
              break;
            } else {
              term += words[i][k];
            }
            k++;
          }

          if (isMatch) {
            var endTerm = "";
            for (var j = k; j < word.length; j++) {
              endTerm += words[i][j];
            }
            words[i] = startTerm + "<span class=\"rrsHighlight\">" + term + "</span>" + endTerm;
          }
        }
      }
      return words.join(' ');
    } else {
      return value;
    }
  } catch (e) {
    edmscPage.HideWaitScreenDialog();
    alert("Report->Highlight\n" + e.message);
  }
},
Note that the regular expression used is /[^A-Za-z]+/ which matches all non-letter characters. Also, when adding the highlight span, the code still includes the special characters in the final output.
;