البحث والإستبدال بواسطة javascript

[dev11]

<script type="text/javascript">
function tag(tag) {
    var tags = document.getElementById('tags');
    if (tags.value.search(/ + tag + /i) == -1) {
        tags.value = tags.value + tag.toLowerCase() + ' ';
    } else {
        tags.value = replace(tag + ' ', '');
    }
}
</script>
<form method="" action="">
<div>tags: <input type="text" name="tags" id="tags" size="50" /> <input type="reset" value="reset" /> <input type="submit" value="tag!" /></div>
<div>site tags : <a href="javascript:tag('php')">php</a> <a href="javascript:tag('javascript')">javascript</a> <a href="javascript:tag('mysql')">mysql</a> <a href="javascript:tag('howto')">howto</a></div>
</form> 

عند الضغط على رابط ما .. يتم البحث عن القيمة التي يرسلها الرابط فان وجدت يقوم بمسحها ، وان لم توجد فانه يضيف القيمة التي يرسلها الرابط كقيمة جديدة .

السؤال هو : كيف يمكن عمل ذلك ؟

كانت لي محاولة بسيطة لكنها لم تنجح ..

[محمد الثقفي]

السلام عليكم

يجب عليك وضع اسم name لل form حتى تتمكن من جلب محتوياته من خلال الجافا سكريبت

ويفضل استعمال indexOf وليس search

امر replace يتم ادخال القيمه التي تريد التعديل عليها قبله

مثل

str.replace


ان شاءالله يكون هذا طلبك

<script type="text/javascript"> 
function tag(tag) { 
    if (myForm.tags.value.indexOf(tag) == -1) { 
        myForm.tags.value = myForm.tags.value + tag.toLowerCase() + ' '; 
    } else { 
        myForm.tags.value = myForm.tags.value.replace(tag + ' ', ''); 
    } 
} 
</script> 

<form method="" action="" name="myForm">
<div>
tags: 
<input type="text" name="tags" size="50" /> 
<input type="reset" value="reset" /> 
<input type="submit" value="tag!" />
</div> 
<div>
site tags : 
<a href="javascript:tag('php')">php</a> 
<a href="javascript:tag('javascript')">javascript</a> 
<a href="javascript:tag('mysql')">mysql</a> 
<a href="javascript:tag('howto')">howto</a>
</div> 
</form>

[dev11]

الله يعطيك العافية ، هذا هو المطلوب .. لكن على حد علمي أن الصيغ التي على شاكلة

myForm.tags.value

ليست قياسية ، والأصح

document.getElementById('tags').value

[dev11]

هل من الممكن تحديد ( تظليل ) الوسم الذي يتم إختياره ؟ مثلاً عندما يتم إختيار php فإن الرابط يصبح مظللاً وكذلك النص في مربع الإدخال يكون مظللاً ، مثل موقع del.icio.us

[dev11]

الإستبدال غير دقيق ، مثلاً لو كان لدينا

<a href="javascript:tag('php')">php</a>
<a href="javascript:tag('php-code')">php-code</a>

وقمت بإضافتهما معاً ، ثم قمت بالضغط مرة أخرى على الـ tag php لإزالته ، فإنه سيقوم بإزالة جزء من الـ tag php-code ليصبح -code

[محمد الثقفي]

السلام عليكم

اعذرني كنت مستعجل في كتابة الكود ولم اقم بالتجربه عليه وفعلا indexOf تبحث عن نص في جمله

تصحيح الكود

<script type="text/javascript"> 
function tag(tag) { 
a = document.getElementById('tags').value.split(" ");
flag = false;
for (i=0;i<a.length;i++){
    if (a[i] == tag) { 
       flag = true; 
       break;
    }
}
if(flag){
document.getElementById('tags').value = document.getElementById('tags').value.replace(tag + ' ', '');
}else{
document.getElementById('tags').value = document.getElementById('tags').value + tag.toLowerCase() + ' '; 
}
} 
</script> 

<form method="" action="" name="myForm">
<div>
tags: 
<input type="text" name="tags" size="50" /> 
<input type="reset" value="reset" /> 
<input type="submit" value="tag!" />
</div> 
<div>
site tags : 
<a href="javascript:tag('php')">php</a> 
<a href="javascript:tag('php-code')">php-code</a> 
<a href="javascript:tag('javascript')">javascript</a> 
<a href="javascript:tag('mysql')">mysql</a> 
<a href="javascript:tag('howto')">howto</a>
</div> 
</form>

[dev11]

جميل جداً ، في الواقع كنت أفكر بتطبيق هذه الطريقة بالأمس لكنني قررت تأجيلها الى اليوم واذا بي اجدك قد وضعتها ، شكراً لك أخي الكريم MohDesign .

نقطة أخيرة :

function tag(tag) {
    var tags = document.getElementById('tags');
    var flag = false;
    var tags1 = tags.value.split(' ');
    for (i = 0; i < tags1.length; i++) {
        if (tags1[i] == tag) {
            flag = true; 
            break;
        }
    }
    if (flag == true) {
        tags.value = tags.value.replace(tag + ' ', '');
    } else {
        tags.value = tags.value + tag + ' ';
    }
    //tags.focus();
} 

لاحظ معي الدالة focus() ، عند إستخدامها فإن المؤشر يكون في بداية مربع النص ، ما أريده هو أن يكون المؤشر في آخر النص ، هل يمكن ذلك ؟

شكراً لك مرة أخرى .

[محمد الثقفي]

مممممممم

جرب

    tags.focus(); 
    tags.value = tags.value;

[dev11]

لم تفلح هذه الطريقة ..

معضلة أخرى : إذا كان هناك قيمة في مربع النص وقمت بالضغط على tag معين فإنه يُدمج مع النص الموجود مسبقاً في مربع النص .

أتمنى أن لا أكون قد أثقلت عليك ..

[محمد الثقفي]

السلام عليكم

dev11 متواجد لخدمتك عزيزي واهلا وسهلا بيك اي وقت

بالنسبه لقيمه موجوده مسبقا قم بحذفها بواسطة indexOf ان وجدت

function tag(tag) { 
    var tags = document.getElementById('tags'); 
    var flag = false; 
    var tags1 = tags.value.split(' '); 
    var myText = "my text";
    if (tags.value.indexOf(myText) != -1) { 
        tags.value = tags.value.replace(myText, '');
    }

    for (i = 0; i < tags1.length; i++) { 
        if (tags1[i] == tag) { 
            flag = true;  
            break; 
        } 
    } 
    if (flag == true) { 
        tags.value = tags.value.replace(tag + ' ', ''); 
    } else { 
        tags.value = tags.value + tag + ' '; 
    } 
    setCursor(tags,55,55);
}

function setCursor(inputText,start,end) { 
    if(inputText.setSelectionRange) { 
        inputText.focus(); 
        inputText.setSelectionRange(start,end); 
    } else { 
        if(inputText.createTextRange) { 
            range=inputText.createTextRange(); 
            range.collapse(true); 
            range.moveEnd('character',end); 
            range.moveStart('character',start); 
            range.select(); 
    } 
  } 
}

قم بتغيير كل من

    var myText = "my text";

للقيمه المسبقه التي وضعتها

    setCursor(tags,55,55);

55 هي قيمه اكبر من الـ size الذي وضعته لل input text الذي هو tag من الامثله الحاليه


واخيرا من المفترض ان يعمل الامر هكذا فقط

function setCursor(inputText,start,end) { 
inputText.focus(); 
inputText.setSelectionRange(start,end); 
}

ولكن internet explorer لا ينفذ setSelectionRange في بعض الاحيان لذلك نجعل الامر هكذا

function setCursor(inputText,start,end) { 
    if(inputText.setSelectionRange) { 
        inputText.focus(); 
        inputText.setSelectionRange(start,end); 
    } else { 
        if(inputText.createTextRange) { 
            range=inputText.createTextRange(); 
            range.collapse(true); 
            range.moveEnd('character',end); 
            range.moveStart('character',start); 
            range.select(); 
    } 
  } 
}

اي نستعمل createTextRange

[dev11]

أستاذي MohDesign ، اسأل الله أن يوفقك في حياتك الدنيا والآخرة .

بالنسبة للقيمة الموجودة مسبقاً ، فهي قيمة غير محددة أو غير معروفة مسبقاًَ .. أي أنني لا أريد إزالتها بل أريد إضافة الـ tag الجديد عليها ، إذاً سوف نتأكد .. إذا كانت هناك مسافة بعد القيمة المسبقة فإننا نضيف الـ tag الجديد مباشرة ، أما إن لم تكن هناك مسافة فإننا نضيفها ثم نضيف الـ tag الجديد ، سأحاول حل هذه المشكلة وسنرى ..

بالمناسبة بدلاً من تحديد حجم مربع النص في الدالة setCursor قمت بتحديدها عن طريق الـ tags.value.length لتصبح :

setCursor(tags, tags.value.length, tags.value.length); 

أيضاً بالنسبة للطريقة

tags.focus();
tags.value = tags.value; 

فهي تعمل على firefox و internet explorer ولا تعمل على opera وهو المتصفح الذي قمت بالتجربة عليه . أما طريقة الـ setCursor فهي تعمل على الثلاثة معاً .

شكراً لك أستاذي MohDesign .

[dev11]

بالنسبة للقيمة الموجودة مسبقاً ، فهي قيمة غير محددة أو غير معروفة مسبقاًَ .. أي أنني لا أريد إزالتها بل أريد إضافة الـ tag الجديد عليها ، إذاً سوف نتأكد .. إذا كانت هناك مسافة بعد القيمة المسبقة فإننا نضيف الـ tag الجديد مباشرة ، أما إن لم تكن هناك مسافة فإننا نضيفها ثم نضيف الـ tag الجديد

لم أستطع حتى الآن التنفيذ ، الفكرة وطريقة التطبيق موجودة لكن ..

[محمد الثقفي]

ضع كل التاج التي تريدها داخل array

قبل عملية الادخال استخدم لوب لتعرف اذا كان ال tag.value يحتوي على قيم اخرى اذا ضع مسافه

وقم باضافة الكلمه التي وجدتها داخل المصفوفه مره اخرى وذلك لكي لايقوم باضافة مسافه عند اضافة تاج اخرى جديده

[dev11]

هل تقصد أن أقوم بتخزين القيم السابقة ومن ثم أطبعا مجدداً بالطريقة التي أريدها ؟

هذه محاولتي :

function tag(tag) {
    var tags = document.getElementById('tags');
    var flag = false;
    var tags1 = tags.value.split(' ');
    for (var i = 0; i < tags1.length; i++) {
        if (tags1[i] == tag) {
            flag = true; 
            break;
        }
    }
    if (flag == true) {
        rewrite(tags, tags1);
        tags.value = tags.value.replace(tag + ' ', '');
    } else {
        rewrite(tags, tags1);        
        tags.value = tags.value + tag + ' ';
    }
    setCursor(tags, tags.value.length, tags.value.length);
}
function setCursor(inputText,start,end) {
    if (inputText.setSelectionRange) {
        inputText.focus();
        inputText.setSelectionRange(start, end);
    } else {
        if (inputText.createTextRange) {
            range = inputText.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    }
}
function rewrite(tags, tags1) {
    tags.value = '';    
    for (var i = 0; i < tags1.length; i++) {
        tags.value = tags.value + tags1[i] + ' ';
    }
} 

لا أعتقد أن الفكرة وصلت بشكل كامل ، لاحظ معي ..

لدي قيمة غير معروفة في مربع النص


أقوم بالضغط على وسم php فتصبح النتيجة

وتتشابك النتيجة السابقة مع النتيجة الجديدة

مأريده هو: إن وجدت تلك القيمة السابقة يتم إضافة مسافة بعدها لتصبح مثل

[محمد الثقفي]

بحاول فيها اليوم ان شاءالله