js לכבות ולהפעיל ניקוד וטעמים

pcinfogmach

אני מחפש סקריפט לדף אינטרנט שיוכל לכבות ולהפעיל טעמים או ניקוד כמו שיש במאגר תא שמע.
https://tashma.jewishoffice.co.il/books/learn/1000/תנ"ך/בראשית/א

כמה הערות:
שינוי צבע הטקסט לא בא בא בחשבון
לא הגיוני לעשות span לכל סימן
להסיר לכאורה יותר קל מלהחזיר
להחזיר על ידי רענון הדף אפשרי אבל - זה יקפיץ את המשתמש חזרה לראש הדף.
תודה מראש

dovid

בקוד אמור להיות קבוע (const) עם כל התוכן.
בעת שינוי אתה טוען מהקבוע הנ"ל ולפי הבחירה מחליט מה להוריד עם החלפת רגקס ואת התוצאה אתה שם בHTML.

pcinfogmach

@dovid
זה לא יגרום לטעינת העמוד מחדש?

חגי

אתחול:

    let nodes = document.querySelectorAll('.text-line');
    nodes.forEach(node => 
        node.dataset.prevText = node.textContent
            .replace(/[\u0591-\u05BD\u05BF-\u05C7]/g,""))

בכל החלפה:

nodes
.forEach(function(node) { 
        var prevText = node.dataset.prevText;
        var currentText = node.textContent;
        node.textContent = prevText;
        node.dataset.prevText = currentText;
    });

עשיתי את זה על הselector של תא שמע, אתה יכול להחליף לאיזה selector שאתה צריך.

אהרן

@pcinfogmach כתב בjs לכבות ולהפעיל ניקוד וטעמים:

אני מחפש סקריפט לדף אינטרנט שיוכל לכבות ולהפעיל טעמים או ניקוד כמו שיש במאגר תא שמע.
https://tashma.jewishoffice.co.il/books/learn/1000/תנ"ך/בראשית/א

כמה הערות:
שינוי צבע הטקסט לא בא בא בחשבון
לא הגיוני לעשות span לכל סימן
להסיר לכאורה יותר קל מלהחזיר
להחזיר על ידי רענון הדף אפשרי אבל - זה יקפיץ את המשתמש חזרה לראש הדף.
תודה מראש

מעתיק מהאתר דנן

this.text = this.text.replace(/[\u05B0-\u05BD\u05C1\u05C2\u05C4\u05C5]/g, "")

pcinfogmach

בסוף הלכתי על הכיוון של @dovid
הנה דף דוגמא

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>חבקוק</title>
        <style>
            /* Style for the floating bar */
            .floating-bar {
                position: fixed;
                bottom: 10px;
                left: 10px;
                background-color: #ffffff;
                padding: 10px;
                border: 1px solid #dddddd;
                border-radius: 5px;
                z-index: 999;
            }
        </style>
    </head>
    <body dir="rtl">
     <div class="floating-bar">
            <button onclick="toggleVowels()">ניקוד</button>
            <button onclick="toggleCantillation()">טעמים</button>
        </div>

    <p>
    . הַמַּשָּׂא֙ אֲשֶׁ֣ר חָזָ֔ה חֲבַקּ֖וּק הַנָּבִֽיא׃
        <p>
    ב. עַד־אָ֧נָה יְהֹוָ֛ה שִׁוַּ֖עְתִּי וְלֹ֣א תִשְׁמָ֑ע אֶזְעַ֥ק אֵלֶ֛יךָ חָמָ֖ס וְלֹ֥א תוֹשִֽׁיעַ׃
        <p>
    ג. לָ֣מָּה תַרְאֵ֤נִי אָ֙וֶן֙ וְעָמָ֣ל תַּבִּ֔יט וְשֹׁ֥ד וְחָמָ֖ס לְנֶגְדִּ֑י וַיְהִ֧י רִ֦יב וּמָד֖וֹן יִשָּֽׂא׃
        <p>
    ד. עַל־כֵּן֙ תָּפ֣וּג תּוֹרָ֔ה וְלֹא־יֵצֵ֥א לָנֶ֖צַח מִשְׁפָּ֑ט כִּ֤י רָשָׁע֙ מַכְתִּ֣יר אֶת־הַצַּדִּ֔יק עַל־כֵּ֛ן יֵצֵ֥א מִשְׁפָּ֖ט מְעֻקָּֽל׃
        <p>
    ה. רְא֤וּ בַגּוֹיִם֙ וְֽהַבִּ֔יטוּ וְהִֽתַּמְּה֖וּ תְּמָ֑הוּ כִּי־פֹ֙עַל֙ פֹּעֵ֣ל בִּימֵיכֶ֔ם לֹ֥א תַאֲמִ֖ינוּ כִּ֥י יְסֻפָּֽר׃
        <p>
    ו. כִּֽי־הִנְנִ֤י מֵקִים֙ אֶת־הַכַּשְׂדִּ֔ים הַגּ֖וֹי הַמַּ֣ר וְהַנִּמְהָ֑ר הַהוֹלֵךְ֙ לְמֶרְחֲבֵי־אֶ֔רֶץ לָרֶ֖שֶׁת מִשְׁכָּנ֥וֹת לֹּא־לֽוֹ׃
        <p>
    ז. אָיֹ֥ם וְנוֹרָ֖א ה֑וּא מִמֶּ֕נּוּ מִשְׁפָּט֥וֹ וּשְׂאֵת֖וֹ יֵצֵֽא׃
        <p>
    ח. וְקַלּ֨וּ מִנְּמֵרִ֜ים סוּסָ֗יו וְחַדּוּ֙ מִזְּאֵ֣בֵי עֶ֔רֶב וּפָ֖שׁוּ פָּרָשָׁ֑יו וּפָֽרָשָׁיו֙ מֵרָח֣וֹק יָבֹ֔אוּ יָעֻ֕פוּ כְּנֶ֖שֶׁר חָ֥שׁ לֶאֱכֽוֹל׃
        <p>
    ט. כֻּלֹּה֙ לְחָמָ֣ס יָב֔וֹא מְגַמַּ֥ת פְּנֵיהֶ֖ם קָדִ֑ימָה וַיֶּאֱסֹ֥ף כַּח֖וֹל שֶֽׁבִי׃
        <p>
    י. וְהוּא֙ בַּמְּלָכִ֣ים יִתְקַלָּ֔ס וְרֹזְנִ֖ים מִשְׂחָ֣ק ל֑וֹ ה֚וּא לְכׇל־מִבְצָ֣ר יִשְׂחָ֔ק וַיִּצְבֹּ֥ר עָפָ֖ר וַֽיִּלְכְּדָֽהּ׃
        <p>
    יא. אָ֣ז חָלַ֥ף ר֛וּחַ וַֽיַּעֲבֹ֖ר וְאָשֵׁ֑ם ז֥וּ כֹח֖וֹ לֵאלֹהֽוֹ׃
        <p>
    יב. הֲל֧וֹא אַתָּ֣ה מִקֶּ֗דֶם יְהֹוָ֧ה אֱלֹהַ֛י קְדֹשִׁ֖י לֹ֣א נָמ֑וּת יְהֹוָה֙ לְמִשְׁפָּ֣ט שַׂמְתּ֔וֹ וְצ֖וּר לְהוֹכִ֥יחַ יְסַדְתּֽוֹ׃
        <p>
    יג. טְה֤וֹר עֵינַ֙יִם֙ מֵרְא֣וֹת רָ֔ע וְהַבִּ֥יט אֶל־עָמָ֖ל לֹ֣א תוּכָ֑ל לָ֤מָּה תַבִּיט֙ בּֽוֹגְדִ֔ים תַּחֲרִ֕ישׁ בְּבַלַּ֥ע רָשָׁ֖ע צַדִּ֥יק מִמֶּֽנּוּ׃
        <p>
    יד. וַתַּעֲשֶׂ֥ה אָדָ֖ם כִּדְגֵ֣י הַיָּ֑ם כְּרֶ֖מֶשׂ לֹא־מֹשֵׁ֥ל בּֽוֹ׃
        <p>
    טו. כֻּלֹּה֙ בְּחַכָּ֣ה הֵֽעֲלָ֔ה יְגֹרֵ֣הוּ בְחֶרְמ֔וֹ וְיַאַסְפֵ֖הוּ בְּמִכְמַרְתּ֑וֹ עַל־כֵּ֖ן יִשְׂמַ֥ח וְיָגִֽיל׃
        <p>
    טז. עַל־כֵּן֙ יְזַבֵּ֣חַ לְחֶרְמ֔וֹ וִֽיקַטֵּ֖ר לְמִכְמַרְתּ֑וֹ כִּ֤י בָהֵ֙מָּה֙ שָׁמֵ֣ן חֶלְק֔וֹ וּמַאֲכָל֖וֹ בְּרִאָֽה׃
        <p>
    יז. הַ֥עַל כֵּ֖ן יָרִ֣יק חֶרְמ֑וֹ וְתָמִ֛יד לַהֲרֹ֥ג גּוֹיִ֖ם לֹ֥א יַחְמֽוֹל׃ {ס} 
    <p>
    . הַמַּשָּׂא֙ אֲשֶׁ֣ר חָזָ֔ה חֲבַקּ֖וּק הַנָּבִֽיא׃
        <p>
    ב. עַד־אָ֧נָה יְהֹוָ֛ה שִׁוַּ֖עְתִּי וְלֹ֣א תִשְׁמָ֑ע אֶזְעַ֥ק אֵלֶ֛יךָ חָמָ֖ס וְלֹ֥א תוֹשִֽׁיעַ׃
        <p>
    ג. לָ֣מָּה תַרְאֵ֤נִי אָ֙וֶן֙ וְעָמָ֣ל תַּבִּ֔יט וְשֹׁ֥ד וְחָמָ֖ס לְנֶגְדִּ֑י וַיְהִ֧י רִ֦יב וּמָד֖וֹן יִשָּֽׂא׃
        <p>
    ד. עַל־כֵּן֙ תָּפ֣וּג תּוֹרָ֔ה וְלֹא־יֵצֵ֥א לָנֶ֖צַח מִשְׁפָּ֑ט כִּ֤י רָשָׁע֙ מַכְתִּ֣יר אֶת־הַצַּדִּ֔יק עַל־כֵּ֛ן יֵצֵ֥א מִשְׁפָּ֖ט מְעֻקָּֽל׃
        <p>
    ה. רְא֤וּ בַגּוֹיִם֙ וְֽהַבִּ֔יטוּ וְהִֽתַּמְּה֖וּ תְּמָ֑הוּ כִּי־פֹ֙עַל֙ פֹּעֵ֣ל בִּימֵיכֶ֔ם לֹ֥א תַאֲמִ֖ינוּ כִּ֥י יְסֻפָּֽר׃
        <p>
    ו. כִּֽי־הִנְנִ֤י מֵקִים֙ אֶת־הַכַּשְׂדִּ֔ים הַגּ֖וֹי הַמַּ֣ר וְהַנִּמְהָ֑ר הַהוֹלֵךְ֙ לְמֶרְחֲבֵי־אֶ֔רֶץ לָרֶ֖שֶׁת מִשְׁכָּנ֥וֹת לֹּא־לֽוֹ׃
        <p>
    ז. אָיֹ֥ם וְנוֹרָ֖א ה֑וּא מִמֶּ֕נּוּ מִשְׁפָּט֥וֹ וּשְׂאֵת֖וֹ יֵצֵֽא׃
        <p>
    ח. וְקַלּ֨וּ מִנְּמֵרִ֜ים סוּסָ֗יו וְחַדּוּ֙ מִזְּאֵ֣בֵי עֶ֔רֶב וּפָ֖שׁוּ פָּרָשָׁ֑יו וּפָֽרָשָׁיו֙ מֵרָח֣וֹק יָבֹ֔אוּ יָעֻ֕פוּ כְּנֶ֖שֶׁר חָ֥שׁ לֶאֱכֽוֹל׃
        <p>
    ט. כֻּלֹּה֙ לְחָמָ֣ס יָב֔וֹא מְגַמַּ֥ת פְּנֵיהֶ֖ם קָדִ֑ימָה וַיֶּאֱסֹ֥ף כַּח֖וֹל שֶֽׁבִי׃
        <p>
    י. וְהוּא֙ בַּמְּלָכִ֣ים יִתְקַלָּ֔ס וְרֹזְנִ֖ים מִשְׂחָ֣ק ל֑וֹ ה֚וּא לְכׇל־מִבְצָ֣ר יִשְׂחָ֔ק וַיִּצְבֹּ֥ר עָפָ֖ר וַֽיִּלְכְּדָֽהּ׃
        <p>
    יא. אָ֣ז חָלַ֥ף ר֛וּחַ וַֽיַּעֲבֹ֖ר וְאָשֵׁ֑ם ז֥וּ כֹח֖וֹ לֵאלֹהֽוֹ׃
        <p>
    יב. הֲל֧וֹא אַתָּ֣ה מִקֶּ֗דֶם יְהֹוָ֧ה אֱלֹהַ֛י קְדֹשִׁ֖י לֹ֣א נָמ֑וּת יְהֹוָה֙ לְמִשְׁפָּ֣ט שַׂמְתּ֔וֹ וְצ֖וּר לְהוֹכִ֥יחַ יְסַדְתּֽוֹ׃
        <p>
    יג. טְה֤וֹר עֵינַ֙יִם֙ מֵרְא֣וֹת רָ֔ע וְהַבִּ֥יט אֶל־עָמָ֖ל לֹ֣א תוּכָ֑ל לָ֤מָּה תַבִּיט֙ בּֽוֹגְדִ֔ים תַּחֲרִ֕ישׁ בְּבַלַּ֥ע רָשָׁ֖ע צַדִּ֥יק מִמֶּֽנּוּ׃
        <p>
    יד. וַתַּעֲשֶׂ֥ה אָדָ֖ם כִּדְגֵ֣י הַיָּ֑ם כְּרֶ֖מֶשׂ לֹא־מֹשֵׁ֥ל בּֽוֹ׃
        <p>
    טו. כֻּלֹּה֙ בְּחַכָּ֣ה הֵֽעֲלָ֔ה יְגֹרֵ֣הוּ בְחֶרְמ֔וֹ וְיַאַסְפֵ֖הוּ בְּמִכְמַרְתּ֑וֹ עַל־כֵּ֖ן יִשְׂמַ֥ח וְיָגִֽיל׃
        <p>
    טז. עַל־כֵּן֙ יְזַבֵּ֣חַ לְחֶרְמ֔וֹ וִֽיקַטֵּ֖ר לְמִכְמַרְתּ֑וֹ כִּ֤י בָהֵ֙מָּה֙ שָׁמֵ֣ן חֶלְק֔וֹ וּמַאֲכָל֖וֹ בְּרִאָֽה׃
        <p>
    יז. הַ֥עַל כֵּ֖ן יָרִ֣יק חֶרְמ֑וֹ וְתָמִ֛יד לַהֲרֹ֥ג גּוֹיִ֖ם לֹ֥א יַחְמֽוֹל׃ {ס} 



    <script>
        const originalText = document.body.innerHTML; 
        var isVowelsReversed = false;
        var isCantillationReversed = false;

        function toggleVowels() {
        var newText = originalText;
            if (!isVowelsReversed)
            {
                // Show/hide the specified vowels
                newText = newText.replace(/[\u05B0-\u05BD\u05C1\u05C2\u05C4\u05C5]/g, "");
            }           
            if (isCantillationReversed)
            {
                // Show/hide the specified cantillation marks
                newText = newText.replace(/[\u0591-\u05AF]/g, "");
            }   
            
            document.body.innerHTML = newText
            // Toggle the state
            isVowelsReversed = !isVowelsReversed;
        }

        function toggleCantillation() {
        var textElement = document.getElementById('originalText');
        var newText = originalText;
            if (!isCantillationReversed)
            {
                // Show/hide the specified cantillation marks
                newText = newText.replace(/[\u0591-\u05AF]/g, "");
            }
            if (isVowelsReversed)
            {
                // Show/hide the specified vowels
                newText = newText.replace(/[\u05B0-\u05BD\u05C1\u05C2\u05C4\u05C5]/g, "");
            }
           
            document.body.innerHTML = newText

            // Toggle the state
            isCantillationReversed = !isCantillationReversed;
        }
    </script>

    </body>
    </html>

תחומים - פורום חרדי מקצועי

js לכבות ולהפעיל ניקוד וטעמים