Search Text with Special Characters

Hi,

I am getting some problem to find out text position.
I have textarea what have the following code.

<textarea id="textId">This is Second Line.hello ' and "helo" & this is normal $it is £found '' and ; round , * ! look me
<helo> ? no £4.00 is the price. "'" is the price which I am Looking and ; round , * !
<helo> ? no £4.00 is the price. "'" and """ allow this is " cut
hello ' and "helo" & this is normal $it is £pound '' and ; round , * ! yes sure
<helo> ? no £4.00 is the price. "'" and """ allow this is " john
</textarea>

<input type="button" value="find" onclick="findText()" />

here is the javascript

function findText(){
var textarea=$("#textId").val();
textarea=escape(textarea);
textarea=unescape(textarea);

var searchText="is the price. "'" and """ allow this is " cut
hello ' and "helo" & this is normal $it is £pound";

searchText=escape(searchText);
searchText=unescape(searchText);

var index=textarea.indexOf(searchText);
alert(index);

}

Its always give me a -1 I also use the escape and unescape functions to try to search but result is same. Its could not find the position of text. Can any body help me in this matter.

Hi,

You need to mask the double quotes which occur within the string you want to search for.
You also need to use a newline character for the line break.

This’ll work:

function findText(){
  var textarea=$("#textId").val();
  var searchText="is the price. \\"'\\" and \\"\\"\\" allow this is \\" cut\
hello ' and \\"helo\\" & this is normal $it is £pound";
  var index=textarea.indexOf(searchText);
  console.log(index);
}

Thank you very much for your reply. Could you please tell me more that how to insert \ and
in searchText because this values comes by user. Thanks once again.

Hi,

Sorry, I thought that the value which comes from the user is textarea.

Taking that as an example:
Imagine the user enters “Hello” (including the quotation marks).
Using your method you would then test for that string like this:

var textarea=$("#textId").val();
var searchText="\\"hello\\"";
var index=textarea.indexOf(searchText);
console.log(index);

The same for a newline.
Imagine the user entered “hello” (without quotes), pressed return, then entered “hello” again.

var textarea=$("#textId").val();
var searchText="hello\
hello";
var index=textarea.indexOf(searchText);
console.log(index);

If the location of the match is unimportant, you might consider:

var pattern = /hello\
hello/,
     userInput = $("#textId").val();
if (pattern.test(userInput)){
  console.log("Match!");
}

This way you don’t have to worry about escaping quotes etc.

Does that help, or have I understood what you are trying to do?

Acutally the both values comes from user like textarea value and the search string.

Oh ok. Sorry for the misunderstanding.In that case, I’d probably do this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Compare text areas</title>
  </head>
  <body>
    <textarea id="textArea1"></textarea>
    <textarea id="textArea2"></textarea>
    <input type="button" id="find" value="Find Match" />
    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
    $("#find").on("click", function(){
      var val1 = $("#textArea1").val(),
          val2 = $("#textArea2").val();
      
      if (val1.match(val2)){
        console.log("Match!");
      }
    });
    </script>
  </body>
</html>

Thanks once again for the reply. I test it but it gives me the error on console and also how I can find the position of text in textarea box?

This works for me in the latest Chrome:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Compare text areas</title>
    <style>textarea{ width:250px; height:100px;}</style>
  </head>
  <body>
    <textarea id="textArea1"></textarea>
    <textarea id="textArea2"></textarea>
    <input type="button" id="find" value="Find Match" />

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
    $("#find").on("click", function(){
      var val1 = $("#textArea1").val(),
          val2 = $("#textArea2").val();

	  console.log(val1.indexOf(val2));
    });
    </script>
  </body>
</html>

What is the error you are seeing?

console is undefined Thats the error

Ah ok, which browser are you using?

Just change console.log() into alert()

Thanks a lot

No problem :slight_smile:

If you want to find out about using the console and why it is good, here’s a brief tutorial I wrote.