Wie kann man feststellen, ob eine Zeichenfolge ein bestimmtes Zeichen in JavaScript enthält?


333

Ich habe eine Seite mit einem Textfeld, auf der ein Benutzer einen Registrierungscode mit 24 Zeichen (Buchstaben und Zahlen, Groß- und Kleinschreibung beachten) eingeben soll. Früher habe ich maxlengthden Benutzer auf die Eingabe von 24 Zeichen beschränkt.

Die Registrierungscodes werden normalerweise als durch Bindestriche getrennte Zeichengruppen angegeben. Ich möchte jedoch, dass der Benutzer die Codes ohne Bindestriche eingibt.

Wie kann ich meinen JavaScript-Code ohne jQuery schreiben, um zu überprüfen, ob eine bestimmte Zeichenfolge, die der Benutzer eingibt, keine Bindestriche enthält oder besser noch alphanumerische Zeichen enthält?


2
Die hier gefundene Antwort stackoverflow.com/questions/3192612 enthält Informationen zur Validierung von alphanumerischen Zeichen.
JasCav

1
Und um reguläre Ausdrücke zu lernen: reguläre-Ausdrücke.info
Felix Kling

Für Sie jquery Leute sollten und könnten Sie verwenden inArray.
JonH

3
Wie Eingaben formatiert werden, ist kein menschliches Problem. Es ist das Problem des Computers. Nehmen Sie alles, was der Benutzer eingibt, und entfernen Sie alle Zeichen, die nicht dazu gehören (nicht Alpha). Testen Sie, ob das Ergebnis 24 Zeichen lang ist, und validieren Sie es dann. Benutzer hassen wirklich formatierte Eingaben.
tggagne

Antworten:


589

Um "Hallo" in zu finden your_string

if (your_string.indexOf('hello') > -1)
{
  alert("hello found inside your_string");
}

Für die alphanumerische Zahl können Sie einen regulären Ausdruck verwenden:

http://www.regular-expressions.info/javascript.html

Alpha Numeric Regular Expression


Das war sehr hilfreich. Wenn ich als Python-Programmierer spreche, verwende ich das, um das Schlüsselwort "in" zu ersetzen (was möglicherweise unorthodox ist oder nicht, ich bin mir nicht sicher), aber es funktioniert für mehr als nur ein einzelnes Zeichen.
TrevorKirkby

1
Ich verstehe nicht, wie dies bei der Antwort abgestimmt wurde. Ich kann sehen, dass viele Leute durch Googeln hierher kommen. Ein besserer Weg wäre definitiv die Verwendung eines regulären Ausdrucks.
Spock

25
Sie würden einen regulären Ausdruck verwenden, um nach einem einzelnen Zeichen zu suchen? Das ist ein übermäßiger Aufwand, um genau das zu erreichen, was die eingebaute Funktion tut. Es gibt viele Leute, die Regex nicht verstehen, und im Allgemeinen ist die einfachere Antwort die beste.
kemiller2002

Ich würde mit gehen /hello/g.test(your_string). Während indexOf funktioniert, erzählt ein Regex-Test meiner Meinung nach eine bessere Geschichte darüber, was Sie erreichen möchten. Wenn ich versuche, eine Zeichenfolge in einer Zeichenfolge zu finden, ist der Index irrelevant.
Joe Maffei


69

Mit ES6 .includes ()

"FooBar".includes("oo"); // true

"FooBar".includes("foo"); // false

"FooBar".includes("oo", 2); // false

E: Wird vom IE nicht unterstützt - stattdessen können Sie den Tilde-Opperator ~( Bitwise NOT ) mit .indexOf () verwenden.

~"FooBar".indexOf("oo"); // -2 -> true

~"FooBar".indexOf("foo"); // 0 -> false

~"FooBar".indexOf("oo", 2); // 0 -> false

Wird der Tilde-Operator mit einer Zahl verwendet, ist dies effektiv ~N => -(N+1). Verwenden Sie es mit doppelter Negation !!( logisch NICHT ), um die Zahlen in Bools umzuwandeln:

!!~"FooBar".indexOf("oo"); // true

!!~"FooBar".indexOf("foo"); // false

!!~"FooBar".indexOf("oo", 2); // false

Einfach, lesbar und gibt einen Booleschen Wert zurück. Perfekt, wenn Sie keinen regulären Ausdruck benötigen.
Brybrabraun

1
** Bitte beachten Sie, dass die Includes-Methode vom IE nicht unterstützt wird **
Bonez024

52

Wenn Sie den Text in Variable haben foo:

if (! /^[a-zA-Z0-9]+$/.test(foo)) {
    // Validation failed
}

Dadurch wird getestet und sichergestellt, dass der Benutzer mindestens ein Zeichen und nur alphanumerische Zeichen eingegeben hat .


Die beste Antwort hier, alle anderen Antworten sind null von meinem pov.
chris_r


10

ES6 enthält die eingebaute Methode ( includes) in prototypeStrings, mit der überprüft werden kann, ob der String einen anderen String enthält oder nicht.

var str = 'To be, or not to be, that is the question.';

console.log(str.includes('To be')); 

Die folgende Polyfüllung kann verwendet werden, um diese Methode in nicht unterstützten Browsern hinzuzufügen. ( Quelle )

if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    'use strict';
    if (typeof start !== 'number') {
      start = 0;
    }
    
    if (start + search.length > this.length) {
      return false;
    } else {
      return this.indexOf(search, start) !== -1;
    }
  };
}


7

Verwenden Sie dazu einen regulären Ausdruck.

function isAlphanumeric( str ) {
 return /^[0-9a-zA-Z]+$/.test(str);
}

Dies prüft auf genau eine Ziffer und akzeptiert nicht alle alphanumerischen Zeichen, wie es das OP wünscht.
CDhowie

@cdhowie .. habe ein + vergessen, aber ich hatte die Frage auch falsch verstanden .. danke für den Hinweis.
Gabriele Petrioli

6

Sie denken alle zu viel nach. Verwenden Sie einfach einen einfachen regulären Ausdruck, es ist Ihr bester Freund.

var string1 = "Hi Stack Overflow. I like to eat pizza."
var string2 = "Damn, I fail."

var regex = /(pizza)/g // Insert whatever phrase or character you want to find

string1.test(regex); // => true
string2.test(regex); // => false

Regex in 5 Minuten lernen?


Um etwas Praktisches daraus zu machen, führen Sie es einfach in einer Auswahl aus:if ( string1.test(regex) ) { alert("He likes pizza!"); }
Adam McArthur

Und Ihr alphanumerischer Test wäre ...var regex = /^[a-z0-9]+$/i
Adam McArthur

4
Das ist rückwärts. Siehe developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… regexObj.test (str)
Ralph Yozzo

Es rückwärts? regex.test(string1)
hlcs

Ihre Beispielmethoden sind rückwärts. Es sollte sein regex.test(str). ( str.match(regex)ist ähnlich, gibt aber keinen Booleschen
Wert zurück

6

Wenn Sie am Anfang oder am Ende der Zeichenfolge nach Zeichen suchen, können Sie auch startsWithund verwendenendsWith

const country = "pakistan";
country.startsWith('p'); // true
country.endsWith('n');  // true

5

var inputString = "this is home";
var findme = "home";

if ( inputString.indexOf(findme) > -1 ) {
    alert( "found it" );
} else {
    alert( "not found" );
}


4

So testen Sie nur auf alphanumerische Zeichen:

if (/^[0-9A-Za-z]+$/.test(yourString))
{
    //there are only alphanumeric characters
}
else
{
    //it contains other characters
}

Die Regex prüft auf 1 oder mehr (+) des Zeichensatzes 0-9, AZ und az, beginnend mit dem Beginn der Eingabe (^) und endend mit dem Ende der Eingabe ($).


4

Kevins Antwort ist korrekt, erfordert jedoch eine "magische" Nummer wie folgt:

var containsChar = s.indexOf(somechar) !== -1;

In diesem Fall müssen Sie wissen, dass -1 für nicht gefunden steht . Ich denke, dass eine etwas bessere Version wäre:

var containsChar = s.indexOf(somechar) >= 0;

Nun nach den ursprünglichen , Strom und Entwurf Normen, indexOf()kehren -1 , wenn die Zeichenfolge nicht gefunden wird. Es ist also kaum magischer als die Verwendung von 0 .
Alle Arbeiter sind essentiell

3

Versuche dies:

if ('Hello, World!'.indexOf('orl') !== -1)
    alert("The string 'Hello World' contains the substring 'orl'!");
else
    alert("The string 'Hello World' does not contain the substring 'orl'!");

Hier ist ein Beispiel: http://jsfiddle.net/oliverni/cb8xw/


3

Die Suchfunktion von String ist ebenfalls nützlich. Es sucht nach einem Zeichen sowie einer Unterzeichenfolge in einer bestimmten Zeichenfolge.

'apple'.search('pl') kehrt zurück 2

'apple'.search('x') Rückkehr -1


2

Wenn Sie Daten aus dem DOM lesen, wie z. B. das Tag ap oder h1, möchten Sie zwei native JavaScript-Funktionen verwenden. Dies ist recht einfach, aber auf es6 beschränkt, zumindest für die Lösung, die ich bereitstellen werde. Ich werde alle p-Tags im DOM durchsuchen. Wenn der Text ein "T" enthält, wird der gesamte Absatz entfernt. Ich hoffe, dieses kleine Beispiel hilft jemandem!

HTML

<p>Text you need to read one</p>
<p>Text you need to read two</p>
<p>Text you need to read three</p>

JS

let paras = document.querySelectorAll('p');

paras.forEach(p => {
  if(p.textContent.includes('T')){
       p.remove();
    } 
});

1

Funktioniert perfekt. Dieses Beispiel wird viel helfen.

<script>    
    function check()
    {
       var val = frm1.uname.value;
       //alert(val);
       if (val.indexOf("@") > 0)
       {
          alert ("email");
          document.getElementById('isEmail1').value = true;
          //alert( document.getElementById('isEmail1').value);
       }else {
          alert("usernam");
          document.getElementById('isEmail1').value = false;
          //alert( document.getElementById('isEmail1').value);
       }
    }
</script>

<body>
    <h1>My form </h1>
    <form action="v1.0/user/login" method="post" id = "frm1">
        <p>
            UserName : <input type="text" id = "uname" name="username" />
        </p>
        <p>
            Password : <input type="text" name="password" />
        </p>
        <p>
            <input type="hidden" class="email" id = "isEmail1" name = "isEmail"/>
        </p>
        <input type="submit" id = "submit" value="Add User" onclick="return check();"/>
    </form>
</body>

0

Demonstration: Die include () -Methode findet das "enthält" -Zeichen in der gesamten Zeichenfolge und gibt ein true zurück.

var string = "This is a tutsmake.com and this tutorial contains javascript include() method examples."

str.includes("contains");

//The output of this

  true


0

Überprüfen Sie, ob die Zeichenfolge alphanumerisch oder alphanumerisch ist + einige zulässige Zeichen

Die schnellste alphanumerische Methode ist wahrscheinlich wie folgt: Bester Weg zur alphanumerischen Prüfung in Javascript, da sie direkt mit Nummernkreisen arbeitet.

Dann, ein paar andere zusätzlichen Zeichen ermöglichen sanely können wir sie nur setzen in einemSet für schnelles Nachschlagen.

Ich glaube, dass diese Implementierung Ersatzpaare korrekt korrekt behandelt.

#!/usr/bin/env node

const assert = require('assert');

const char_is_alphanumeric = function(c) {
  let code = c.codePointAt(0);
  return (
    // 0-9
    (code > 47 && code < 58) ||
    // A-Z
    (code > 64 && code < 91) ||
    // a-z
    (code > 96 && code < 123)
  )
}

const is_alphanumeric = function (str) {
  for (let c of str) {
    if (!char_is_alphanumeric(c)) {
      return false;
    }
  }
  return true;
};

// Arbitrarily defined as alphanumeric or '-' or '_'.
const is_almost_alphanumeric = function (str) {
  for (let c of str) {
    if (
      !char_is_alphanumeric(c) &&
      !is_almost_alphanumeric.almost_chars.has(c)
    ) {
      return false;
    }
  }
  return true;
};
is_almost_alphanumeric.almost_chars = new Set(['-', '_']);

assert( is_alphanumeric('aB0'));
assert(!is_alphanumeric('aB0_-'));
assert(!is_alphanumeric('aB0_-*'));
assert(!is_alphanumeric('你好'));

assert( is_almost_alphanumeric('aB0'));
assert( is_almost_alphanumeric('aB0_-'));
assert(!is_almost_alphanumeric('aB0_-*'));
assert(!is_almost_alphanumeric('你好'));

GitHub stromaufwärts .

Getestet in Node.js v10.15.1.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.